Vue.js project - Module build failed with CSS Modules

Question

I have a project on Vue.js and I plan to use CSS modules for my local styles (for sass and scss), but I keep on getting a 'Failed to compile error' on the CSS Loader validation part.

I already tried a lot of solutions on Github by configuring my Webpack in a lot of ways, but I keep on getting the same error.

Here's my webpack.config.js file under 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'
        ],
      },

And this is how I use 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>

Here's the complete error that I'm getting:

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 hope I could resolve this error.

Eddie · Accepted Answer · 2019-12-17 15:40:46Z

1

Unfortunately, getLocalIdent option from css-loader doesn’t work with CSS processed by vue-loader.

As the author of Vue.js, Evan You, said:

"This is because vue-loader loaders' query have to be stringified, so the function option is dropped in the process"

You can read more about a workaround that may work for you here: https://medium.com/@my_own_grave/reducing-css-generated-by-vue-loader-by-using-classnames-shorten-trick-aa1d25d77473?

(!) However, I've just found a better workaround and successfully implemented it on our project! If you use Webpack 4, you can easily pass localIdentName inside modules as an object like this:

use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: { localIdentName: '[name]_[local]_[hash:base64:5]' }
            }
          },
          'sass-loader'
        ]

edited Dec 17, 2019 at 15:40

answered Dec 16, 2019 at 13:53

Eddie

112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BroiSatse · Accepted Answer · 2019-10-30 15:01:49Z

0

Accoridng to documentation, it should be:

  options: {
    modules: true,
    localIdentName: 'MyApp__[local]--[hash:base64:5]'
  }

answered Oct 30, 2019 at 15:01

BroiSatse

44.8k8 gold badges63 silver badges89 bronze badges

1 Comment

Fookero Over a year ago

I already tried that. But I'm still getting the same error. :(

Collectives™ on Stack Overflow

Vue.js project - Module build failed with CSS Modules

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related