Add sass-loader to webpack

Hi,
I want to use scss style file, so I need to add sass-loader to webpack.config.js file, I have seen Can't add loaders to generated webpack.config.js · Issue #766 · eclipse-theia/theia · GitHub, I follow their way, but I get the following error

, How to fix this

my webpack.config.js file is

Hey @wss,

the generated webpack config is an array, not an object. That’s why the merge function returns an object with the index 1 (which is the unknown property that webpack complains about). You should probably just fix it by wrapping the object that you put in the merge function into an array.

hi,
Thank you for your replay,
I try add array like this
image
but get same error.

I try this
image
and
image
these two get same error


Do I do something wrong?

Hi @wss,

Just now seeing your post. In case you still looking for an answer to the sass question, here’s a snippet of what my webpack.config.js looks like wrt sass support:

const config = require('./gen-webpack.config.js');

config.forEach(o => o.module.rules = [
    ...o.module.rules,
    {
        test: /\.scss$/,
        use: ['extract-loader', 'css-loader', 'sass-loader']
    }
]);