vue-cli 5 如何配置 CSS Modules

鲨鱼虾啦啦

于 2023-06-20 19:27:09 发布

阅读量1.5k

点赞数

分类专栏： Vue 文章标签： vue.js css 前端

本文链接：https://blog.youkuaiyun.com/u010763322/article/details/131313739

版权

Vue 专栏收录该内容

5 篇文章

订阅专栏

文章介绍了在Vue项目中如何避免使用stylus等预处理器，直接通过创建CSS文件并引入实现模块化。只需在vue.config.js中配置css.loaderOptions，即可让CSS模块工作，无需复杂加载器。示例展示了创建自定义模块CSS文件，并在组件中动态应用类名的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

折腾了半天，发现根本不用安装什么 stylus、stylus、style-loader、css-loader 什么东东一大堆！！！

直接创建 css 文件然后引入就可以了，需要配置的话可以在 css.loaderOptions 配置，默认不配置就可以，真的我哭死！！！

1. 新建文件 img.custom-module.css

/* img.custom-module.css */
.img-w200 {
    width: 200px;
    height: 200px;
}
:local(.img-full) {
    width: 100%;
    height: auto;
}

2. 在 vue 文件中可以 import 引入

// IndexPage.vue
<script setup>
  import styles from './img.custom-module.css'
  import { onMounted } from 'vue'

  onMounted(() => {
    const ele = document.getElementsByTagName('img')
    ele[0].className = styles['img-w200']
  })

</script>

<template>
  <img src="@/assets/m.jpg"  />
</template>

这时，运行之后就可以看到 img 标签已经动态添加了类名

3. 配置 css.loaderOptions

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  css: {
    loaderOptions: {
      css: {
        modules: {
          // custom-module 就是 css 文件名的中间的值
          auto: /\.custom-module\.\w+$/i,
          localIdentName: process.env.NODE_ENV === 'local' ? '[local]': '[hash:base64]'
        }
      }
    }
  }
})