Webpack not picking up imports of scss files in react components

Question

I want to set up my react project with an scss file for each component. So given a component called PermissionPicker I want to import a PermissionPicker.scss in the jsx file.

With my current set up the webpack loaders are only loading scss files when imported in my entry point (boot-client.tsx). import './PermissionPicker.scss' in my PermissionPicker components causes a webpack error:

Module parse failed: PermissionPicker.scss Unexpected token (1:1) You may need an appropriate loader to handle this file type.

I was under the impression that I could import scss anywhere in my project similar to how create-react-app works.

Any advice would be great!

Below is my webpack config.

const sharedConfig = () => ({
stats: { modules: false },
resolve: { extensions: [ '.js',  '.ts', '.tsx', '.jsx' ] },
output: {
    filename: '[name].js',
    publicPath: '/dist/' /
},
module: {
    rules: [
        { test: /\.tsx?$/, include: /client/, use: 'babel-loader' },
        { test: /\.tsx?$/, include: /client/, use: 'awesome-typescript-loader?silent=true' }
    ]
},
plugins: [new CheckerPlugin()]
});

const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig(), {
    entry: { 'main-client': './client/boot-client.tsx' },
    module: {
        rules: [
            { test: /\.css$/, use: ExtractTextPlugin.extract({ use: 'css-loader' }) },
            { test: /\.scss$/, use: ExtractTextPlugin.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "sass-loader"
                    }],
                    fallback: "style-loader"
                })
            },
            { test: /\.(png|jpg|jpeg|gif|svg)(\?\S*)?$/, use: 'url-loader?limit=25000' }
        ]
    },
    output: { path: path.join(__dirname, clientBundleOutputDir) },
    plugins: [
        new ExtractTextPlugin('site.css'),
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./wwwroot/dist/vendor-manifest.json')
        })
    ].concat(isDevBuild ? [
        new webpack.SourceMapDevToolPlugin({
            filename: '[file].map',
            moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]')
        })
    ] : [
    ])
    });

Answer 1

You need to install node-sass with sass-loader, because the sass-loader requires node-sass as peerDependency

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

And missing something as include: join(__dirname, 'src')

rules: [
        { 
          test: /\.css$/, 
          include: join(__dirname, 'src'),
          use: ExtractTextPlugin.extract({ use: 'css-loader' }) 
        },
        { 
          test: /\.scss$/, 
          include: join(__dirname, 'src'),
          use: ExtractTextPlugin.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "sass-loader"
                }],
                fallback: "style-loader"
          })
        },
        { test: /\.(png|jpg|jpeg|gif|svg)(\?\S*)?$/, use: 'url-loader?limit=25000' }
    ]

The src is a common path for Components, you need to indicate the path from the path of your config file