CSS Modules 配置不生效 webpack4
使用webpack4来构建vue项目,在配置文件中配置了CSS Modules,但是使用时并没有效果,也不报错!
下面是配置文件中module选项的代码
module: {
rules: [
{
test:/\.html$/,
use:["html-loader"]
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
cssModules: {
localIdentName: '[path][name]---[local]---[hash:base64:5]',
camelCase: true
}
}
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader'}
]
},
{
test: /\.scss$/,
use: [
{ loader: 'style-loader'},
{ loader: 'css-loader'},
{
loader: 'px2rem-loader',
// options here
options: {
remUni: 75,
remPrecision: 8
}
},
{ loader: 'sass-loader' }
]
}
]
},
下面是vue组件的代码
<template>
<div>
<h1 class="home" :class="$style.home">home</h1>
<p :class="$style.title">888</p>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" module>
@import '../../assets/css/reset.scss';
.home{
color: blue;
font-size: 80px;
}
</style>
正常应该显示cssmodule生成的class名的 ,但是现在什么都没有
如果你是用的vue-loader v15版本的话可以参考
CSS Modules
CSS Modules 现在需要通过 css-loader 选项显式地配置。<style> 标签上的 module 特性仍然需要用来局部注入到组件中。
好消息是你现在可以在同一处配置 localIdentName 了:
{
module: {
}
}
官方文档
https://vue-loader.vuejs.org/...