Note: this feature is available with
Generally, we recommend that you don’t reuse the same CSS classes across different components. For example, instead of using a
.Button CSS class in
<RejectButton> components, we recommend creating a
<Button> component with its own
.Button styles, that both
<RejectButton> can render (but not inherit).
Following this rule often makes CSS preprocessors less useful, as features like mixins and nesting are replaced by component composition. You can, however, integrate a CSS preprocessor if you find it valuable.
To use Sass, first install
$ npm install node-sass --save $ # or $ yarn add node-sass
Now you can rename
src/App.scss and update
src/App.js to import
This file and any other file will be automatically compiled if imported with the extension
To share variables between Sass files, you can use Sass imports. For example,
src/App.scss and other component style files could include
@import "./shared.scss"; with variable definitions.
This will allow you to do imports like
@import 'styles/_colors.scss'; // assuming a styles directory under src/ @import '~nprogress/nprogress'; // importing a css file from the nprogress node module
Tip: You can opt into using this feature with CSS modules too!
Note: You must prefix imports from
~as displayed above.
Note: If you're using Flow, add the following to your
.flowconfigso it'll recognize the
[options] module.file_ext=.sass module.file_ext=.scss