11

我将 webpack 和 React 与 react-css-modules 和 scss 文件一起使用。当我尝试构建它时，每个导入 scss 文件的文件都会出现错误 -

ERROR in ./app/components/Buttons/Button.scss
Module build failed: ReferenceError: window is not defined

我已经用谷歌搜索了一天半，但没有找到！请帮忙！

这是我的 webpack 设置：

var webpack = require('webpack');
var PROD = (process.env.NODE_ENV === 'production');
var precss       = require('precss');
var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
});

module.exports = {
    entry: [
        './app/index.jsx'
    ],
    output: {
        path: __dirname + '/dist',
        filename: PROD ? 'bundle.min.js' : 'bundle.js'
    },
    watchOptions: {
        poll: true
    },
    module: {
        preLoaders: [
            {
                test: /\.jsx$|\.js$/,
                loader: 'eslint-loader',
                include: __dirname + '/assets',
                exclude: /bundle\.js$/
            }
        ],
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                query: {
                    presets: ['es2015', 'react']
                }
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('style', ['style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded'])
            }
        ]
    },
    postcss: [autoprefixer({ browsers: ['last 2 versions'] })],
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    plugins: PROD ? [
        new webpack.optimize.UglifyJsPlugin({
            compress: { warnings: false }
        })
    ] : [
        HTMLWebpackPluginConfig,
        new ExtractTextPlugin("styles.css", {
            allChunks: true
        })
    ]
};

提前致谢！

4

2 回答 2

5

当我尝试解决 Webpack 2、scss、extracttextplugin 和 react 的相同错误时，这个问题不断出现。以下对我有用。

{ 
    test:/\.scss$/,
    use:ExtractTextPlugin.extract({fallback:"style-loader",use:["css-loader","sass-loader"]}),
    include:path.join(__dirname,"client/src"),
},

希望这可以帮助。

于 2017-04-16T03:58:26.430 回答
0

我认为您必须将其更改为此，第二个参数作为字符串而不是数组。还删除了样式加载器的重复使用。

loader: ExtractTextPlugin.extract('style', 'css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded')
于 2016-07-29T02:40:14.070 回答