css-loader options error

[Maorey]

Version

4.0.0-beta.1

Reproduction link

https://github.com/vuejs/vue-cli

Environment info

css-loader 3.0.1

Steps to reproduce

1. set css.loaderOptions.css.localIdentName get css-loader ValidationError
2. set css.loaderOptions.css.modules.localIdentName get css-loader ValidationError too

What is expected?

correct css-loader option

What is actually happening?

wrong

---

vue-cli/packages/@vue/cli-service/lib/config/css.js

Line 126 in 76eb714

const {

[LinusBorg]

Hi

Thanks for filing this issue! Could you please provide a small reproduction on jsfiddle.net or as a github reporsitory so we can debug this without trying to replicate this ourselves?`

That would be very helpful, thanks!

[Maorey]

It‘s quite simple，in css-loader 3.1.0, it's options like this:

{
  modules: {
    mode: 'local',
    localIdentName: '[path][name]__[local]--[hash:base64:5]',
    context: path.resolve(__dirname, 'src'),
    hashPrefix: 'my-custom-hash',
  },
  localsConvention: 'camelCaseOnly,
}

but in this line:

const { localIdentName = '[name]_[local]_[hash:base64:5]' } = loaderOptions.css || {}
Object.assign(cssLoaderOptions, {
  modules: {
    localIdentName,
  },
})

so, when pass:

{
  modules: {
    localIdentName: '[folder]-[name]-[local][emoji]',
  },
  localsConvention: 'camelCaseOnly,
}

get:

{
  modules: {
    localIdentName: '[name]_[local]_[hash:base64:5]',
  },
  localsConvention: 'camelCaseOnly,
}

That's not i wanted

pass:

{
  localIdentName: '[folder]-[name]-[local][emoji]',
  localsConvention: 'camelCaseOnly,
}

get:

{
  modules: {
    localIdentName: '[folder]-[name]-[local][emoji]',
  },
  localIdentName: '[folder]-[name]-[local][emoji]',
  localsConvention: 'camelCaseOnly,
}

That's will get a ValidationError

[Maorey]

And, how about this option: css.modules?

By default, only files that ends in *.module.[ext] are treated as CSS modules. Setting this to true will allow you to drop .module in the filenames and treat all *.(css|scss|sass|less|styl(us)?) files as CSS modules.