Problem with Sass loader in abandoned but running Vue project

Question

The guy who made this Vue frontend has left the company, and I'm stuck upgrading the Webpack from 2 to 4. i don't understand where the Sass configs are, no matter how many times and phrases I ack. If I define a ruleset for Sass and CSS in the webpack base config file, like so:

{
rule: /\.scss./.
use: [
    loader: "sass-loader", "vue-style-loader", "style-loader", "css-loader", "postcss-loader"
]
}

It generates like 68 errors for each and every loader. I've googled it, the errors it generates, which are various, relate to the fact that the ruleset has been defined twice. But ack does not show such thing, and plus, if I remove them, I get this error, for like 68 times:

You may need an appropriate loader to handle this file type.

What could be the problem? I'm using node-sass alongside sass-loader.

Answer 1

Webpack 4 uses a different loader structure. You need an array to chain, and the order matters.

// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader" // compiles Sass to CSS, using Node Sass by default
            ]
        }]
    }
};

As an aside, and from experience, it may be worth your time to use vue-cli-3 and start from scratch. Just create a default project using vue-cli-3, and start migrating your code to it. It will handle all the loaders by default, along with eliminating the boilerplate configuration for testing, building, analyzing, and debugging. Then your config code won't even be needed :)