例如,我正在使用webpack并尝试使用css模块进行主题设置:
<style lang="scss" module="theme1">
.header {
color: red;
}
</style>
<style lang="scss" module="theme2">
.header {
color: blue;
}
</style>
但是,两个.header标记都从css-loader获得相同的localIdentName,因此,第二个主题每次都会覆盖另一个主题。我的加载器链:vue-loader,css-loader,sass-loader我当前的localIdentName:'[local]_[hash:base64:5]'
(路径和名称都不会产生任何结果,我只希望有某种[value]标签。
显然是因为在从vue-loader
升级v14-> v15的过程中自定义注入名称被破坏。
在GitHub上查看此问题,并提供更多详细信息:https://github.com/vuejs/vue-loader/issues/1578
临时解决方案(将其放入css-loader
的模块选项中:]
{
localIdentName: '[module]_[local]_[hash:base64:5]',
getLocalIdent(context, localIdentName, localName) {
const { resourceQuery, resourcePath } = context;
const { index, module } = loaderUtils.parseQuery(resourceQuery);
const selector = loaderUtils.interpolateName(context, localIdentName, {
context: context.rootContext,
content: resourcePath + resourceQuery + localName,
})
.replace(/\[local\]/gi, localName)
.replace(/\[module\]/gi, typeof module === 'boolean' ? '' : module)
.replace(/\[index\]/gi, index)
.replace(new RegExp('[^a-zA-Z0-9\\-_\u00A0-\uFFFF]', 'g'), '-')
.replace(/^((-?[0-9])|--)/, '_$1');
return selector;
},
}