CSS 模块不适用于我通过 vue-cli3 安装的新 vue 项目。
这是文档中的两个配置示例。其中一个被我的应用程序忽略,第二个在构建时显示错误
我使用以下组件来测试配置:
<template>
<div class="hello">
The red text here
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<style module>
.hello {
color: red;
}
</style>
https://cli.vuejs.org/guide/css.html#referencing-assets
You can use CSS Modules in *.vue files out of the box with
<style module>
.
我的
vue.config.js
:module.exports = {
css: {
loaderOptions: {
css: {
localIdentName: '[name]-[hash]',
}
}
}
}
文字还是黑的
https://vue-loader.vuejs.org/guide/css-modules.html
我的
vue.config.js
:module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: {
// enable CSS Modules
modules: true,
// customize generated class names
localIdentName: '[local]_[hash:base64:8]'
}
}
]
}
]
}
}
}
执行
npm run serve
时出错:Syntax Error: SyntaxError
(5:1) Unknown word
3 | // load the styles
4 | var content = require("!!../../node_modules/css-loader/index.js??ref--13-1!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./HelloWorld.vue?vue&type=style&index=0&module=true&lang=css&");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
| ^
6 | if(content.locals) module.exports = content.locals;
7 | // add the styles to the DOM
我在github上发现了很多关于最后一个错误的问题,但没有答案
请帮助我理解,我做错了什么。
最佳答案
您的第一次尝试几乎没问题,只需传递模块标志:
module.exports = {
css: {
loaderOptions: {
module: true, // here is the config
css: {
localIdentName: '[name]-[hash]',
}
}
}
关于vue.js - 无法配置 css 模块以使用 vue-loader,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53887199/