CSS Modules

css-loader 提供了一种叫做 CSS Modules 的方案，可以帮我们自动生成唯一的类名，不会和其他模块的命名出现冲突
要使用 CSS Modules 有几个步骤，首先需要在 webpack 的配置文件中打开相关的配置

{test: /\.less$/,include: path.resolve('./src'),use: [MiniCssExtractPlugin.loader,{loader: 'css-loader',options: {modules: {localIdentName: '[local]-[hash:5]'}}},'less-loader']
}

上面配置的意思是我们对 src 下面的 .less 文件启用 modules 转换，转换的格式模板为 [local]-[hash:5]，其中 hash 是根据文件名和类名确定的，所以不会冲突，因为 CSS Modules 会改变输出的类名，我们只能对自己写的代码进行适配。
经过上面的配置之后，我们在代码中导入的 less 文件返回的就是一个键值对了，其中键名是原始的类名或 ID 名，键值就是转换输出之后的名字，如：

{btns: "btns-bdd41",body: "body-dab49"
}

所以我们就不能在 JSX 中填写固定的类名了，需要使用变量的方式，如下

import * as React from 'react'
import style from './style.less'export default class Main extends React.Component {render() {return (<div className={style.body}><div className={style.btns}></div></div>)}
}

CSS Modules 会转换所有的类名和 ID 名，如果有些名字我们不想让它转换，可以使用 :global()，如：

:global(#app) {background-color: #f4f4f4;
}

CSS Modules相关推荐

CSS Modules 用法教程
学过网页开发就会知道,CSS 不能算编程语言,只是网页样式的一种描述方法. 为了让 CSS 也能适用软件工程方法,程序员想了各种办法,让它变得像一门编程语言.从最早的Less.SASS,到后来的 Po ...
CSS Modules入门教程
为什么引入CSS Modules 或者可以这么说,CSS Modules为我们解决了什么痛点.针对以往我写网页样式的经验,具体来说可以归纳为以下几点: 全局样式冲突过程是这样的:你现在有两个模块,分 ...
[Vue]Scoped Css与Css Modules的区别
均为解决CSS全局作用域问题(样式冲突(污染))的一个解决方案. 1.Scoped CSS 当 <style> 标签有 scoped 属性时,相当于在元素中添加了一个唯一属性用来区分. & ...
css-modules,可视化介绍CSS Modules是什么？
你是否曾经为组件设计过样式,却只知道应用了不需要的CSS规则? 也许你会重新考虑CSS的另一个部分,所以规则不适用,或者你会添加!important规则,只是为了让它发挥作用. 这就是CSS Modu ...
css-modules,CSS Modules 方案
在讲CSS Modules之前,先想想什么是CSS Module? 在我眼中CSS Module是对css进行模块化的管理,更加深入的解释就是用来管理css样式的导入与导出.灵活按需导入以便复用代码, ...
less和sass支持 css modules 一样的局部环境和使用方式，解决重名样式覆盖的问题
安装 npm install --save-dev node-sass sass-loader css-loader: css-loader 会对 @import 和 url() 进行处理,就像 js ...
被尤雨溪diss的Native CSS Modules是什么
前天早上正吃着早饭,唱着歌,开开心心摸鱼时,看到一条尤大的推文: 尤:老实说,我认为Native CSS Modules标准是仓促的,再次显示了参与该标准制定过程的人的傲慢经常看尤大和其他大佬们交流 ...
webpack 中实现自动识别 CSS Modules
编者按:本文作者奇舞团前端开发工程师彭体奎背景在 React 项目中使用 CSS 时,如果不使用 CSS in JS 的方案,一般会直接在 JS 文件中导入一个 CSS 文件,比如 import ...
浅谈CSS Modules以及CSS Modules在Vue.js上的使用
前言在平常的开发或者学习中,我们可能会有意无意的接触到CSS Modules.那CSS Modules到底是什么呢?现在,我将带你走进CSS Modules,去了解它的始末.本文将从什么是CSS ...

CSS Modules

CSS Modules相关推荐

最新文章

热门文章