Webpack sass-loader 无法编译导入到 React jsx 文档中的 sass 样式表：意外的字符“@”

Question

我正在使用 Webpack 2.5.1、React 15.5.4。

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

这是我的条目 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";  ...

我看过这个 And this other 但他们没有帮助。

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

Answer 1

你需要这个插件

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var extractPlugin = new ExtractTextPlugin({
    filename: "main.css"
});

然后简单地把

{
    test: /\.scss$/,
    use: extractPlugin.extract({
        use: ["css-loader","sass-loader"]
    })
}

然后在插件中你需要这个：

plugins:[extractPlugin]

希望对您有所帮助

Answer 2

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

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

Webpack sass-loader 无法编译导入到 React jsx 文档中的 sass 样式表：意外的字符“@”

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

css

twitter-bootstrap

reactjs

webpack

sass-loader