vue.js - 无法配置 css 模块以使用 vue-loader
问题描述
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#reference-assets
您可以在 *.vue 文件中使用 CSS 模块,开箱即用
<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]',
}
}
}
推荐阅读
- java - Java(Maven)中深层文件夹结构的意义何在?
- spring - Spring Boot 和 Spring Security 中的入职过滤器
- python - 按绝对值之和的顺序迭代对
- visual-studio - 有没有办法防止变更集评论更新?
- javascript - 为什么不会
行为正确 - mongodb - 在客户端暂停/恢复 MongoDB 领域同步的解决方法或方法?
- sharepoint-online - 如何在 SPFx 中查找列类型?
- css - flex 换行时的边距
- r - 尝试编写一个简短的脚本,可以计算R中所有小于或等于100的素数
- wordpress - 如何通过简码获取 Co-Author-Plus 数据