0

我正在使用Webpack 2.5.1, React 15.5.4。

我正在尝试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";  ...

我看过这个帖子和另一个帖子，但它们没有帮助。

那么，我做错了什么吗？我怎样才能解决这个问题？谢谢。

4

2 回答 2

0

你需要这个插件

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]

希望能帮助到你

于 2017-05-27T21:57:08.327 回答
0

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

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

于 2017-05-27T22:00:57.740 回答