Currently, I am in the process of developing a vue app using vue-cli 3. My goal is to incorporate sass files into my webpack build; however, the vue-cli abstracts away the webpack.config.js file. Instead, it instructs us to create a vue.config.js file and customize it with a specific set of directives.
If I were to configure the webpack.config.js, the following code snippet would successfully achieve this:
module.exports = {
module: {
rules: [
// ... other rules omitted
// this will apply to both plain `.scss` files
// AND `<style lang="scss">` blocks in `.vue` files
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
}
]
},
// plugin omitted
}
How can I replicate this functionality in my vue.config.js? Below is my attempt at configuring it:
module.exports = {
chainWebpack: config => {
config.module
.rule('scss')
.test(/\.scss$/)
.use('vue-style-loader')
.loader('vue-style-loader')
.use('css-loader')
.loader('css-loader')
.use('sass-loader')
.loader('sass-loader')
.end();
}
};
Unfortunately, this configuration results in an error message:
ERROR TypeError: config.module.rule(...).test(...).use(...).loader(...).use is not a function