css - Webpack sass-loader 无法编译导入到 react jsx 文档中的 sass 样式表 : Unexpected character '@'

Question

我正在使用 Webpack 2.5.1，React 15.5.4。

我正在尝试在 React 元素中使用 Bootstrap _utilities.scss。和当我尝试编译文档时 Webpack 报告错误，因为它使用 @import 语句导入其他 sass partials。

这是我的入口main.jsx文件的代码。

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>)
    }
}  

这是我的 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'
        })
    ]
};  

如您所见，我正在使用style-loader、css-loader 和sass-loader 来编译css 和 scss 文件。

这是我在运行 Webpack 后得到的错误信息。

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

我看过这个post还有这个post但他们没有帮助。

那么，我做错了什么吗？我该如何解决这个问题？谢谢。

Answer 1

您将 node_modules 目录排除在 SASS/CSS 加载器的目标之外，因此 Webpack 将无法为从那里包含的任何 SASS 文件找到合适的加载器。

尝试从您的 SASS/CSS 加载器设置中删除 exclude 属性。