无法配置 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

您可以通过 &lt;style module&gt; 开箱即用地在 *.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的主要内容,如果未能解决你的问题,请参考以下文章

vue教程3-07 vue-loader

vue-loader是什么和vue-cli脚手架的使用

vue-loader的配置

vue-loader的配置

在 vue-loader 中配置 Babel (Symfony Encore)

组件的 vue.js 自定义 css(没有 webpack 和 vue-loader)