My React app was created by create-react-app1.3.1 about five years ago.

I have to change the Node verstion to 8.9.4 every time when I want to run it locally.

The app has both .scss files and .css files which were compiled by relevant scss files. And in components, we imported the CSS file.

So I always want to find a way to import the SCSS file directly.

Today I have made it done.

First, install node-sass and sass-loader

1
2

"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",

As above config, I have to install the specific version for my old project.

Then add a rule for SCSS file in webpack.config.dev.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

{
  test: /\.scss$/,
  use: [
    {
      loader: require.resolve('style-loader')
    },
    {
      loader: require.resolve('css-loader')
    },
    {
      loader: require.resolve('sass-loader'),
      options: {
        sourceMap: true,
        includePaths: ["absolute/path/a", "absolute/path/b"]
      }
    }
  ]
},

Before you serve your project, don’t forget to add .scss extension to loader exclusion list

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

{
  exclude: [
    /\.html$/,
    /\.(js|jsx)$/,
    /\.css$/,
    /\.scss$/,
    /\.json$/,
    /\.bmp$/,
    /\.gif$/,
    /\.jpe?g$/,
    /\.png$/,
    /\.svg$/,
  ],
  loader: require.resolve('file-loader'),
  options: {
    name: 'static/media/[name].[hash:8].[ext]',
  },
},

Now you can import SCSS file in components, and run start script to see the result.

1

import '../index.scss'