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,[email protected] 版本

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

2,[email protected] 版本

来自这个 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>

以上。

相关推荐
gongzemin3 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox15 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号952720 分钟前
【JavaScript】十四、轮播图
javascript·css·css3
麦麦大数据38 分钟前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
树上有只程序猿43 分钟前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下1 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行2 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox