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

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

0 голосов
/ 30 мая 2018

Я новичок в вебпаке и пытаюсь реализовать его для старого сайта.Независимо от того, сколько решений я пробую, я всегда получаю ошибку «Неизвестное слово» при сборке с использованием 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 состоит из списка @операторы импорта.

Вот ошибка, которую я получаю: 

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

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

Кажется, что независимо от того, что находится в файле global.scss, добавленный 'module.exports', кажется, нарушаетbuild.

Я перепробовал много предложений в интернете, но ни одно из них не сработало.

Заранее спасибо!

1 Ответ

0 голосов
/ 01 июня 2018

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

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

...