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

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

Check the first loader, first it get all the files and it excludes the other loaders files
loaders: [
{
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.svg$/
],
loader: 'url',
query: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]'
}
},
so adding
/\.sass$/,
/\.scss$/,
to exclude, seems that fixed the same problem I had :D

Answer 2

When trying to integrate sass into empty react project I used this article. The solution presented there did not work and received the similar error as in the subject.
In my case replacing style-loader with require.resolve('style-loader') helped:
{
test: /\.scss$/,
include: paths.appSrc,
loaders: [require.resolve('style-loader'), require.resolve('css-loader'), require.resolve('sass-loader')]
},

Answer 3

OK, I found the solution - changed from this:
{
test: /\.scss$/,
include: paths.appSrc,
loaders: ["style", "css", "scss"]
},
to this:
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
},
And now my .scss files are loading!!

Answer 4

You probably have to use
include: paths.appSrc,
option to enable webpack hot-reload. So you config snippet could looks like
{
test: /\.scss$/,
include: paths.appSrc,
loaders: ['style', 'css', 'sass']
},

Answer 5

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
]
},

Answer 6

Check this loader settings for the latest versions.
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
}