[Vuejs]-Vue.js project – Module build failed with CSS Modules

by

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'
        ]
👤Eddie

0👍

Accoridng to documentation, it should be:

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

Leave a comment