CODEWITHSUNDEEP
cssreactjssasscreate-react-app
brett
brett

Reputation: 361

sass with create react app

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.

Upvotes: 4

Views: 3121

Answers (4)

Robin Wieruch
Robin Wieruch

Reputation: 15908

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.

Upvotes: 2

Mohamed Allal
Mohamed Allal

Reputation: 20930

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

Upvotes: 1

elektro.blume
elektro.blume

Reputation: 21

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.

Upvotes: 1

JakAttk123
JakAttk123

Reputation: 1806

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;
}

Upvotes: -1

Related Questions