sass with create react app

4
votes

Can someone please tell me if it is worth using Sass/SCSS with React?

I finally set up SCSS to work with Create-React-App without ejecting, but it doesn't seem to work well since it is recommended to use CSS modules with each component.

How would I go about sharing variables, mixins, etc. Is it better just to use CSS?

Any help would be greatly appreciated.

4
cssreactjssasscreate-react-app
Using CSS-in-JS (modules, whatever you want to call it) as opposed to an index.scss file is an architectural choice and neither is "better". Use what you're most comfortable with, and read more about CSS modules if you're interested in what they offer differently from Sass. - glhrmv
if this or any answer has solved your question please consider accepting it by clicking the check-mark and upvote. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this :) - patelarpan

4 Answers

2
votes

The 2. version of create-react-app supports Sass now. Install node-sass (e.g. npm install node-sass) to enable it. For further instructions, check out the documentation. If you need an example, check out this application's Navigation component.

1
votes

I highly recommend using scss, as you can still use CSS-Modules with SCSS. I'm not familiar with the create react app setup, but usually you'd configure webpack with style-loaders like so:

  {
    test: /\.scss$/,
    loaders: [
      'style-loader',
      { loader: 'css-loader', options: { modules: true } },
      'sass-loader',
    ],
    exclude: [srcDir + '/assets/scss/']
  },

The loaders will execute backwards, starting with the sass-loader which will transpile your scss to normal css, then with the css-loader and the option "modules: true" these styles will be made available to use as modules.

Of course it could look a bit different but that would be the basic approach to use css modules with scss.

To share variables and mixins I always use a global scss file, which will be required in the app (e.g. in the app.js). However you'll still have to import that file/s in every component-scss where you need the variables and mixins.

  // GLOBAL STYLES
  {
    test: /\.scss$/,
    loaders: [
      'style-loader',
      'css-loader',
      'sass-loader',
    ],
    include: [srcDir + '/assets/scss/']
  },

Alternatively you could use PostCSS-Properties to make your components even more flexible (e.g. to provide different themes for your app, without explicitly importing the files in your component styles) but afaik those are not supported by IE and would require you to add specific postcss loaders.

see http://cssnext.io/features/#custom-properties-var

The flexibility and maintainability that SASS provides is very useful for big projects especially with react.

However, don't let yourself be influenced by my or the opinion of others - you're free to use the things you're most comfortable with and should always question the way things are done.

1
votes

create-react-app V2 corresponding section doc: (support out of the box) https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet#docsNav

-1
votes

Using Sass/SCSS is pretty much completely unlinked to React. Sass is compiled to regular CSS, and then you use it as such within your HTML or React.

As for sharing variables, when you use @import it basically just takes everything from the file your importing and pastes it in, so you could just make a _variables.sccs file and import it into each file where you want to use your global variables. 

//variables.scss
$primary: red;
$secondary: blue;


//main.scss
@import 'variables';

body {
    background-color: $primary;
    color: $secondary;
}