Question

我是webpack的新手，并且一直在尝试为遗留网站实施它。无论我尝试了多少解决方案，我总是使用sass / raw / css / loaders在构建时出现“未知单词”错误。错误似乎发生在'module.export'，我想这是因为在.js文件中导入样式表而添加的。这是我的webpack.config.js：

module: {
rules: [
    {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
            loader: "babel-loader",
            options: { presets: ["env"] }
        }
    },
    { // sass / scss loader for webpack
        test: /\.(sass|scss)$/,
        use: [
            'css-loader',
            'raw-loader',
            'sass-loader'
        ],
        exclude: /node_modules/
    },
    {
        test: /\.(png|jpg|gif|svg)$/,
        use: [ 'file-loader' ]
    }
]

}

在index.js中：

`import '../css/global.scss';`

global.scss文件由@import语句列表组成。

这是我得到的错误：

ERROR in ./css/analytics/global.scss
Module build failed: Unknown word (1:1)

> 1 | module.exports = ".custom {\n (...)

似乎无论global.scss文件是什么，附加的'module.exports'似乎都会破坏构建。

我在互联网上尝试过很多建议，但都没有。

提前致谢！

Answer 1

我弄清楚我做错了什么。对于这种情况，原始装载机并不是正确的装载机，尽管它看起来像＃39;就像它解决了解决网址问题一样。我用resolve-url-loader替换它，再加上一些调整。结果如下：

    module: {
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: "babel-loader",
                options: { presets: ["env"] }
            }
        },
        { // sass / scss loader for webpack
            test: /\.(sass|scss)$/,
            use: [
                'style-loader',
                'css-loader',
                'resolve-url-loader',
                'sass-loader?sourceMap'
            ],
        },
        {
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: "file-loader",
                options: {
                    name: "[path][name].[hash].[ext]",
                },
            },
        },
        {
            test: /\.svg$/,
            use: "file-loader",
        },
        {
            test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
            use: [{
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: PATH_CONFIGS.global_path + '/fonts'
                }
            }]
        }
    ]

所以我猜这个未知的单词＆＃39;错误是一种通用的响应，可以指出许多可能的问题。希望这有助于处于类似情况的人。

Webpack-4 CSS-Loader在module.export错误未知单词

1 个答案: