Add Sass (.scss) to ejected create-react-app config

Question

I want to add .scss support in my app, which was created using create-react-app.

I did eject npm run eject and installed necessary dependencies: npm install sass-loader node-sass --save-dev

Inside config/webpack.config.dev.js I added to the loaders this snippet:

{
   test: /\.scss$/,
   include: paths.appSrc,
   loaders: ["style", "css", "scss"]
},

So the beginning of the loaders array now look like so:

loaders: [
      // Process JS with Babel.
      {
        test: /\.(js|jsx)$/,
        include: paths.appSrc,
        loader: 'babel',
        query: require('./babel.dev')
      },
      // "postcss" loader applies autoprefixer to our CSS.
      // "css" loader resolves paths in CSS and adds assets as dependencies.
      // "style" loader turns CSS into JS modules that inject <style> tags.
      // In production, we use a plugin to extract that CSS to a file, but
      // in development "style" loader enables hot editing of CSS.
      {
        test: /\.css$/,
        loader: 'style!css!postcss'
      },
      // LOAD & COMPILE SCSS
      {
        test: /\.scss$/,
        include: paths.appSrc,
        loaders: ["style", "css", "scss"]
      },

Now in my jsx when I try to import scss file:

import './assets/app.scss';

I get an error:

Uncaught Error: Cannot find module "./assets/app.scss"

So my config must be wrong as I'm not able to load .scss files. How to adjust config to load .scss files in ejected create-react-app?

Answer 1

as per Latest Configuration [CRA]

::webpack.config.dev.js::

{
    test: /\.css$/,
    use: [
      require.resolve('style-loader'),
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 1,
        },
      },
      {
        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',
            }),
          ],
        },
      },
    ],
  },
  {
    test: /\.scss$/,
    loaders: [
        require.resolve("style-loader"), // creates style nodes from JS strings
        require.resolve("css-loader"), // transl ates CSS into CommonJS
        require.resolve("sass-loader") // compiles Sass to CSS
      ]
  },