Webpack-4 CSS-Loader error unknown word at module.export

Question

I'm new at webpack and have been trying to implement it for a legacy site. No matter how many solutions I try I always get 'Unknown word' error on build using sass/raw/css/loaders. The error seems to happen at 'module.export' which is, I guess, added as a result of importing a style sheet in .js file. Here is my 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' ]
    }
]

}

In index.js:

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

The global.scss file consists of a list of @import statements.

Here is the error I get:

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

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

It seems that no matter what is on the global.scss file, the appended 'module.exports' appears to break the build.

I have tried many suggestions on the internet but none have worked.

Thanks in advance!

Answer 1

I figured out what I was doing wrong. The raw-loader wasn't the right loader for this situation, though it 'looked' like it had solved the issue of getting urls resolved. I replaced it with resolve-url-loader, plus a few more tweaks. Here is the result:

    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'
                }
            }]
        }
    ]

So I am guessing the 'unknown word' error is a somewhat generic response that can point to many possible issues. Hope this helps someone who is in a similar situation.