无法配置 css 模块以使用 vue-loader
Posted
技术标签:
【中文标题】无法配置 css 模块以使用 vue-loader【英文标题】:Cannot configure css modules to work with vue-loader 【发布时间】:2019-05-22 01:38:43 【问题描述】: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
您可以通过
<style module>
开箱即用地在 *.vue 文件中使用 CSS 模块。
我的vue.config.js
:
module.exports =
css:
loaderOptions:
css:
localIdentName: '[name]-[hash]',
文字还是黑的
-
第二个文档示例(下面链接中的第一个代码 sn-p):
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上发现了很多关于最后一个错误的问题,但没有答案
请帮助我理解,我做错了什么。
【问题讨论】:
我现在遇到了类似的问题,请及时更新! 还是没有答案? 【参考方案1】:您的第一次尝试几乎没问题,只需传递模块标志:
module.exports =
css:
loaderOptions:
module: true, // here is the config
css:
localIdentName: '[name]-[hash]',
【讨论】:
热重载并不总是适用于 css 模块,所以要经常刷新。 感谢您的回答,但我的配置出现以下错误Invalid options in vue.config.js: child "css" fails because [child "loaderOptions" fails because ["module" is not allowed]]
我错了。它应该在没有这个标志的情况下工作。确保您使用最新的 vue-cli 服务。以上是关于无法配置 css 模块以使用 vue-loader的主要内容,如果未能解决你的问题,请参考以下文章