Add sass-loader to webpack

#1

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

image
image1340×393 18.3 KB
, How to fix this

my webpack.config.js file is

image
image733×587 21.1 KB

#2

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.

#3

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

image
image1340×393 18.3 KB

I try this
image
and
image
these two get same error

image
image1030×442 23.9 KB

Do I do something wrong?

#4

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