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>

以上。

相关推荐
专注API从业者17 分钟前
基于 Node.js 的淘宝 API 接口开发:快速构建异步数据采集服务
大数据·前端·数据库·数据挖掘·node.js
前端无冕之王19 分钟前
一份兼容多端的HTML邮件模板实践与详解
前端·css·数据库·html
再学一点就睡2 小时前
深入理解 Redux:从手写核心到现代实践(附 RTK 衔接)
前端·redux
天天进步20153 小时前
从零到一:现代化充电桩App的React前端参考
前端·react.js·前端框架
柯南二号3 小时前
【大前端】React Native Flex 布局详解
前端·react native·react.js
龙在天4 小时前
npm run dev 做了什么❓小白也能看懂
前端
hellokai4 小时前
React Native新架构源码分析
android·前端·react native
li理5 小时前
鸿蒙应用开发完全指南:深度解析UIAbility、页面与导航的生命周期
前端·harmonyos
去伪存真5 小时前
因为rolldown-vite比vite打包速度快, 所以必须把rolldown-vite在项目中用起来🤺
前端
KubeSphere5 小时前
Kubernetes v1.34 重磅发布:调度更快,安全更强,AI 资源管理全面进化
前端