vue-cli 下的 CSS Modules

目录

  • [在 js 中使用](#在 js 中使用)
    • [省略 .module](#省略 .module)
  • [在 vue 中使用](#在 vue 中使用)

在 js 中使用

vue-cli 参考

在 Js 中作为 CSS Modules 导入 CSS 或其它预处理文件时,该文件应该以 .module.(css|less|sass|scss|styl) 结尾。

需要安装对应的预处理器和 loader。以 less 为例,需要安装 lessless-loader

举例

foo.module.less

css 复制代码
@color: red;
.container {
  color: @color;
}

test.vue

html 复制代码
<template>
  <div :class="lessStyles.wrap">下雪天的夏风</div>
</template>

<script>
import lessStyles from "./styles/foo.module.less";
export default {
  data() {
    return {
      lessStyles,
    };
  },
};
</script>

注意点:lessStyles 这个对象的 key 是定义的 class 类名,value 是自动生成的字符串。而元素最终添加的类名是 value

渲染结果:

html 复制代码
<div class="index_wrap_AglVD">下雪天的夏风</div>

省略 .module

如果你想去掉文件名中的 .module,可以设置 vue.config.js 中进行设置

1,vue-cli@4.x 版本

js 复制代码
// vue.config.js
module.exports = {
  css: {
    requireModuleExtension: false
  }
}

2,vue-cli@5.x 版本

来自这个 issue解决

js 复制代码
// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      css: {
        modules: {
          auto: () => true
        }
      }
    }
  }
}

在 vue 中使用

不过赘述,配置参考 官网详细文档

使用举例

html 复制代码
<template>
  <p :class="$style.red">This should be red</p>
</template>

<style module>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>

以上。

相关推荐
lkx097886 分钟前
笔记C++语言,太焦虑了
前端·c++·笔记
勇敢di牛牛8 分钟前
【css】快速上手Flexbox布局(理论讲解+实战)
前端·css3
2501_9387802810 分钟前
服务器 Web 安全:Nginx 配置 X-Frame-Options 与 CSP 头,防御 XSS 与点击劫持
服务器·前端·安全
IT_陈寒1 小时前
Java 17 新特性实战:这5个隐藏功能让你的代码效率提升50%
前端·人工智能·后端
艾小码1 小时前
2025年组件化开发这样做,效率提升300%
前端·javascript
驭风少年君8 小时前
《搭建属于自己的网站之网页前端学习》基础入门
前端·学习
刘一说8 小时前
深入理解 Spring Boot 嵌入式 Web 容器:从原理到性能调优
前端·spring boot·firefox
你的人类朋友9 小时前
设计模式的原则有哪些?
前端·后端·设计模式
!执行9 小时前
Web3 前端与合约交互
前端·web3·1024程序员节
潘小安9 小时前
跟着 AI 学(二)- Quill 接入速通
前端