CSS-загрузчик Webpack-4: неизвестное слово в module.export

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

Я понял, что я делаю не так. Необработанный загрузчик не был подходящим загрузчиком для этой ситуации, хотя он "выглядел" так, как будто решил проблему с разрешением URL. Я заменил его на resol-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'
                }
            }]
        }
    ]

Поэтому я предполагаю, что ошибка "неизвестное слово" является несколько общим ответом, который может указывать на многие возможные проблемы. Надеюсь, что это помогает кому-то, кто находится в подобной ситуации.