How to make scss and compass work in ReactJS?

Question

Hello I'm a noob in Reactjs I'm currently working with create-react-app, and I'm trying to make a development in SCSS, I downloaded an example in SCSS and I'm trying to make it work I followed the instructions from this page:

https://medium.com/@Connorelsea/using-sass-with-create-react-app-7125d6913760

I installed this: package

npm install sass-loader node-sass --save-dev

and then modified my webpack.config.dev.js to something like this:

    {
        test: /\.scss$/,

        use: [

          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
            },
          },
          {
            loader: require.resolve('sass-loader'),
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              // Necessary for external CSS imports to work
              // https://github.com/facebookincubator/create-react-app/issues/2677
              ident: 'postcss',
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                  browsers: [
                    '>1%',
                    'last 4 versions',
                    'Firefox ESR',
                    'not ie < 9', // React doesn't support IE8 anyway
                  ],
                  flexbox: 'no-2009',
                }),
              ],
            },
          },
        ],
      },

Then I import the scss file in my React Component:

import './cell.scss';

Everything seems to be working well, but the example I downloaded this scss file starts with this line :

@import "compass/css3";

And when I try to run my application, this error appears:

Module build failed: @import "compass/css3"; ^ File to import not found or unreadable: compass/css3. Parent style sheet: stdin in /cell.scss (line 2, column 1)

I really haven't found any clear solution.. any help will be appreciated.

Have you checked the following link? github.com/facebook/create-react-app/blob/master/packages/… — salman.zare
I think scss is compiling fine, the problem is that I can't add this resource compass, so the compiler doesn't recognize that "compass" resource — Diego

Pritam Pathak Pritam Pathak · Accepted Answer · 2018-10-13T20:20:43

One workaround that I found is, compile the code manually.

You can keep the all your styling in stylesheets folder. Then in sass directory, keep all your sass files and set your config.rb something like this.

http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

You can compile using compass compile.

Make sure you install compass prior to this.

How to make scss and compass work in ReactJS?

1 Answers