Working on a project in Vue.js, I decided to incorporate CSS modules for my local styles (for sass and scss). However, I continuously encounter a 'Failed to compile error' related to the CSS Loader validation process.
Despite attempting various solutions from Github and configuring my Webpack setup in different ways, the error persists.
Below is an excerpt from my webpack.config.js file within module.rules:
{
test: /\.scss$/,
use: [
'vue-style-loader',
{
loader: "css-loader",
options: {
modules: {
localIdentName: 'MyApp__[local]--[hash:base64:5]',
},
}
},
'sass-loader'
],
},
{
test: /\.sass$/,
use: [
'vue-style-loader',
{
loader: "css-loader",
options: {
modules: {
localIdentName: 'MyApp__[local]--[hash:base64:5]',
}
}
},
'sass-loader?indentedSyntax'
],
},
Furthermore, here is how I implement CSS modules on a child component in Vue:
<style lang="scss" module>
.subtitle{
font-size: 1rem !important;
}
.box{
padding: 20% 0 !important;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);
}
</style>
The specific error message that I am encountering is as follows:
ERROR in ./node_modules/css-loader/dist/cjs.js?{"localIdentName":"[hash:base64]_0","importLoaders":true,"modules":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-68c39e04","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!
Module build failed: ValidationError: Invalid options object. CSS Loader has been initialised using an options object that does not match the API schema.
- options has an unknown property 'localIdentName'. These properties are valid:
object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals? }
at validate
I remain hopeful in finding a resolution to this issue.