Webpack sass-loader fails to compile sass stylesheet imported into a react jsx document: Unexpected character '@'

Question

I am using Webpack 2.5.1, React 15.5.4.

I am trying to use Bootstrap _utilities.scss in a react project. And Webpack reports an error when I try to compile the document because it imports other sass partials using @import statement.

This is the code for my entry main.jsx document.

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/scss/_utilities.scss' // this is what causes the error
import '../stylesheets/components/gallery.scss'; // this one compiles properly if I comment the _utilities.scss import statement. It does not use @import notation.

class Gallery extends React.Component {
    render(){
    return (<div id="gallery" className="d-flex p-2">
            <h1>using bootstrap flex-box</h1>
            <p>Something something something!</p>
            <button onClick={() => console.info('You clicked a button')}>Click Me!</button>
        </div>)
    }
}  

This is the code for my webpack.config.js.

const path = require('path');
const webpack = require('webpack');
const CommonChunkPlugin = 
require('./node_modules/webpack/lib/optimize/CommonsChunkPlugin');

module.exports = {
    target: 'web',
    watch: true,
    devtool: 'source-map',

    entry: {
        main: './components/main.jsx',
        vendor: ['react', 'react-dom']
    },

    output: {
        path: path.resolve('..', 'build', 'js'),
        filename: '[name].js'
    },

    module: {
        rules: [
            {
                test: /\.(css|scss)$/,
                exclude: /(node_modules)/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: { sourceMap: true }
                    },
                    {
                        loader: 'sass-loader',
                        options: { sourceMap: true }
                    }
                ]
            },
            {
                test: /(\.js|\.jsx)$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader?cacheDirectory=true',
                options: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    },

    plugins: [
        new CommonChunkPlugin({
            name: 'vendor',
            filename: 'vendor.js'
        })
    ]
};  

As you can see, I am using style-loader, css-loader, and sass-loader to compile css and scss files.

This is the error message I get after running Webpack.

...  _utilities.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "utilities/align";
| @import "utilities/background";  ...  

I have seen this post And this other post but they don't help.

So, Is there something I am doing wrong? How can I get around this? Thanks.

Answer 1

You are excluding node_modules directory from as a target of SASS/CSS loaders, therefore Webpack won't be able to find a proper loader for any SASS file included from there.

Try to remove the exclude property from your SASS/CSS loaders settings.