css modules用法

CSSModule⽤法总结什么是CSS Modules?官⽅解释是：可以理解为：所有的类名和动画名称默认都有各⾃的作⽤域的css⽂件。

通俗点来说是，每个class类是独⽴的可以被单独的按照某种规则编译为独⼀⽆⼆的域名，或者你也可以理解为，每个class都有⾃⼰的scope。

css作⽤域⽬前css作⽤域有三种⽅案1.css modules2.css in js3.BEM +scope其中1、3的区别如下1. 只要是靠⼈去保证代码质量总是不靠谱的，⼈的状态有起伏，但是机器没有，因此推荐⽤机器去解决这些问题。

这个是BEM+scope⽐较⽋缺的2. 需要注意css穿透，如果要改⼀些第三⽅的东西（当然写起来也⽐较简单），具体的可以了解下样式穿透3. BEM写起来很繁琐，⽽且是靠⼈去解决重名的问题。

那么cssModule解决了什么问题？1.变量全局污染问题css scope也能解决这个问题，但是解决问题的思路不⼀样，scope解决全局样式污染的问题的解决办法是通过，scope来限制⼦作⽤域对⽗作⽤域（也可以是全局作⽤域）的污染css module解决办法是通过:local(.text){color:red}:local函数来解决这个问题：global(.class){}:global能在⼦页⾯内写全局变量（我们在修改第三⽅库的时候通常会使⽤这个函数）2.对⽐BEM,BEM相对繁琐，⽽CSS Modulex相对灵活胜出原因： 1.BEM的解决办法是通过⼈来保证css的唯⼀性，CSS Module是通过webpack的打包机制类解决这个问题。

打包代码之前<h1 class="test">An example heading</h1> 打包代码之后<h1 class="_styles__test_309571057">An example heading</h1> 2.灵活，并且不同css⽂件内即使相同的class也不会互相影响 举个栗⼦import real from './real.css'import fake from './fake.css'element.innerHTML = `<div class="${buttons.red} ${rge}">`; 本质上，这种引⼊两个⽂件夹的写法是完全可以的，但是有些时候这种形式的代码复⽤是很实⽤的，还有⼀个不经常⽤的写法.element {composes: dark-red from "./colors.css";font-size: 30px;line-height: 1.2;}　借助CSS Module的compose，来解决这个事情。

JSX 是 React 的一种 JavaScript 语法扩展，它允许我们直接在JavaScript 代码中编写类似 HTML 的代码，以便更加方便地创建 UI 组件。

在 JSX 中，我们经常需要使用 CSS 来为组件添加样式，而Less 是一种 CSS 预处理器，它提供了许多方便的语法和功能，可以让我们更加高效地编写和管理 CSS 代码。

在 React 中，我们经常会将JSX 和 Less 结合使用，以便更好地组织和管理组件的样式。

下面将介绍 JSX 和 Less 的混合写法使用，以及一些最佳实践和注意事项。

一、使用CSS Modules1. 使用CSS Modules可以更好地组织和管理组件的样式。

2. CSS Modules 可以保证样式作用范围的局部化，避免不同组件之间的样式冲突。

3. 使用CSS Modules，可以避免类名的重复和命名冲突，提高了样式的可维护性和可复用性。

二、使用Less的嵌套语法1. Less 提供了嵌套语法，可以更加方便地编写和管理样式。

2. 在 JSX 中使用 Less 的嵌套语法，可以更加直观地表示组件结构和样式的结构。

3. 使用 Less 的嵌套语法，可以避免重复书写父级元素的类名，提高了样式的可读性和可维护性。

三、使用Less的变量和混合1. Less 提供了变量和混合的功能，可以更加方便地管理样式中的颜色、大小等属性。

2. 在 JSX 中使用 Less 的变量和混合，可以提高样式的可定制性和可复用性。

3. 使用 Less 的变量和混合，可以减少样式代码的重复书写，提高了样式的可维护性和可扩展性。

四、结合使用CSS Modules、Less和BEM命名规范1. 结合使用CSS Modules、Less和BEM命名规范，可以更加规范和清晰地组织和管理样式。

2. 使用BEM命名规范可以让样式类名更加具有语义化，提高了样式的可读性和可维护性。

3. 结合使用CSS Modules、Less和BEM命名规范，可以使样式代码更加模块化和可复用，提高了开发效率和代码质量。

CSS蒙版是通过利用背景色、透明度以及CSS的伪元素等来实现的。

具体用法如下：
首先，创建一个蒙版只需要两步：
创建一个半透明的背景色。

通过定位和z-index属性将该背景色覆盖在目标元素上。

例如，给定一个元素，其class为target-element，可以按以下方式添加蒙版效果：
.target-element {
position: relative;
}
.target-element::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 1;
}
这段代码中，target-element是要添加蒙版效果的元素，通过设置其position 为relative来作为定位参考点。

然后使用::before伪元素来创建一个占据整个元素的半透明层，通过设置其z-index属性为1来将其放在目标元素的上层。

蒙版效果可以与其他CSS属性和动画效果结合来实现更多的效果。

例如，将蒙版结合transform属性可以实现图片放大镜效果，将蒙版结合transition属性可以实现鼠标悬停时渐变变暗效果等。

vue引入字体的方法Vue项目中引入字体的方法有以下几种：1. 在`index.html`文件中通过link标签引入字体文件，例如： ```html<link href="./fonts/font.ttf" rel="stylesheet"type="text/css">```2. 使用css预处理器，在样式文件中引入字体文件并定义字体样式，例如：```scss@font-face {font-family: "MyFont";src: url("./fonts/font.ttf") format("truetype");}body {font-family: "MyFont", sans-serif;}```3. 通过CSS Modules方式引入字体文件，例如：```vue<template><div class="my-text">Hello World!</div></template><style lang="scss" module>@font-face {font-family: "MyFont";src: url("~@/assets/fonts/font.ttf") format("truetype"); }.my-text {font-family: "MyFont", sans-serif;}</style>```其中，第一种方式和第二种方式都是全局引入字体文件，而第三种方式则是在组件中引入字体文件。

概述Less是一种基于CSS的样式语言，它为我们在编写CSS时提供了很多便利，包括变量、混合、嵌套等功能。

在React中使用Less可以让我们更高效地管理样式，并且使得代码更具有复用性。

本文将介绍在React中使用Less的写法，包括安装Less、创建Less文件、以及在React组件中应用Less样式。

一、安装Less在使用Less之前，首先需要安装Less的编译器，以将Less代码转换为CSS代码。

目前比较常用的Less编译器有less-loader和style-resources-loader。

下面分别介绍如何使用这两种编译器。

1. 使用less-loader在React项目中，可以使用less-loader来编译Less文件。

首先需要安装less和less-loader：```npm install less less-loader --save-dev```安装完成后，在webpack.config.js或者create-react-app的配置文件中进行相关配置，以将Less文件转换为CSS文件。

2. 使用style-resources-loader另一种常用的Less编译器是style-resources-loader，它不仅可以将Less文件转换为CSS文件，还可以将全局变量和混合引入到所有的Less文件中。

安装方法如下：```npm install style-resources-loader --save-dev```在webpack.config.js或者create-react-app的配置文件中进行相关配置，以实现全局变量和混合的引入。

二、创建Less文件在React项目中，通常会在src目录下创建一个styles文件夹来存放所有的样式文件。

在styles文件夹下新建一个index.less文件，并在其中引入其他Less文件。

```// index.lessimport "variables.less";import "mixins.less";import ponents.less";```在这里，variables.less用来存放全局变量，mixins.less用来存放混合，ponents.less则用来存放具体的组件样式。

在React中使用JSX语法编写组件时，可以使用不同的方式来添加样式。

以下是几种常见的方式：1. 内联样式（Inline Style）：可以直接在JSX元素上使用style属性来添加内联样式。

样式属性的值是一个包含CSS属性和对应值的JavaScript对象。

例如：```jsx<div style={{ color: 'red', fontSize: '16px' }}>Hello World</div>```2. 使用外部样式表（External Stylesheet）：可以将样式定义在外部的CSS文件中，然后在JSX组件中引入该CSS文件。

例如：首先，在外部的CSS文件（如styles.css）中定义样式：```css.myClass {color: red;font-size: 16px;}```然后，在JSX组件中引入CSS文件：```jsximport React from 'react';import './styles.css';function MyComponent() {return <div className="myClass">Hello World</div>;}export default MyComponent;```3. CSS模块化（CSS Modules）：可以使用CSS模块化来为每个组件创建独立的、局部的样式。

首先，需要为样式文件添加.module.css后缀（如styles.module.css）。

然后，在JSX组件中引入样式文件，并使用具体的类名。

例如：首先，在样式文件（如styles.module.css）中定义样式：```css.myClass {color: red;font-size: 16px;}```然后，在JSX组件中引入样式文件，并使用具体的类名：```jsximport React from 'react';import styles from './styles.module.css';function MyComponent() {return <div className={styles.myClass}>Hello World</div>;}export default MyComponent;```这些是几种常见的在JSX中添加样式的方式。

vite 打包不分离组件的样式Vite 是一个基于 ES Module 的构建工具，它提供了快速的热更新和构建速度。

在 Vite 中，如果你不想分离组件的样式，可以通过配置来实现。

通常情况下，Vite 默认会通过 CSS Modules 的方式来处理组件的样式，即使不分离样式，也可以通过配置来控制。

首先，在你的 Vite 项目中，你需要确保你的样式文件是以`.css` 或者 `.scss` 的格式来命名，这样 Vite 才会默认将其视为样式文件。

然后，在你的 Vite 配置文件中，你可以使用 `css`配置项来指定是否要启用 CSS Modules 以及是否要分离组件的样式。

例如，你可以在 `vite.config.js` 文件中这样配置：javascript.// vite.config.js.export default {。

css: {。

modules: false, // 禁用 CSS Modules.extract: false, // 禁用分离组件样式。

},。

}。

通过上述配置，你可以禁用 CSS Modules，并且禁用分离组件的样式。

这样，Vite 在构建时就会将所有组件的样式打包到一个统一的文件中，而不会分离到各自的组件中去。

需要注意的是，禁用分离组件样式可能会导致样式文件变得较大，增加加载时间，因此需要权衡利弊来决定是否禁用分离组件的样式。

另外，Vite 的配置项可能会随着版本的更新而有所变化，建议查阅最新的官方文档来获取最准确的配置信息。

总之，通过适当的配置，你可以在 Vite 中实现不分离组件样式的需求，从而达到你想要的样式打包效果。

希望这些信息能够帮助到你。

CSSModules⼊门教程为什么引⼊CSS Modules或者可以这么说，CSS Modules为我们解决了什么痛点。

针对以往我写⽹页样式的经验，具体来说可以归纳为以下⼏点：全局样式冲突过程是这样的：你现在有两个模块，分别为A、B,你可能会单独针对这两个模块编写⾃⼰的样式，例如a.css、b.css，看⼀下代码// A.jsimport './a.css'const html = '<h1 class="text">module A</h1>'// B.jsimport './b.css'const html = '<h1 class="text">module B</h1>'下⾯是样式：/* a.css */.text {color: red;}/* b.css */.text {color: blue;}导⼊到⼊⼝APP中// App.jsimport A from './A.js'import B from './B.js'element.innerTHML = 'xxx'由于样式是统⼀加载到⼊⼝中，因此实际上的样式合在⼀起（这⾥暂定为mix.css）显⽰顺序为：/* mix.css *//* a.css */.text {color: red;}/* b.css */.text {color: blue;}根据CSS的Layout规则，因此后⾯的样式会覆盖掉前⾯的样式声明，最终有效的就是text的颜⾊为blue的那条规则，这就是全局样式覆盖，同理，这在js中也同样存在，因此就引⼊了模块化，在js中可以⽤⽴即执⾏函数表达式来隔离出不同的模块var moduleA = (function(document, undefined){// your module code})(document)var moduleB = (function(document, undefined){// your module code})(document)⽽在css中要想引⼊模块化，那么就只能通过namespace来实现，⽽这个⼜会带来新的问题，这个下⾯会讲到嵌套层次过深的选择器为了解决全局样式的冲突问题，就不得不引⼊⼀些特地命名namespace来区分scope，但是往往有些namespace命名得不够清晰，就会造成要想下⼀个样式不会覆盖，就要再加⼀个新的namespace来进⾏区分，最终可能⼀个元素最终的显⽰样式类似如以下：.widget .table .row .cell .content .header .title {padding: 10px 20px;font-weight: bold;font-size: 2rem;}在上⼀个元素的显⽰上使⽤了7个选择器，总结起来会有以下问题：根据CSS选择器的解析规则可以知道，层级越深，⽐较的次数也就越多。

在vue中使⽤cssmodules替代scroped前⾯的话 css modules是⼀种流⾏的模块化和组合CSS的系统。

vue-loader提供了与css modules的集成，作为scope CSS的替代⽅案。

本⽂将详细介绍css modules引⼊ 最开始使⽤Vue的时候，提倡并⼤量使⽤的是scoped这种技术<style scoped>@media (min-width: 250px) {.list-container:hover {background: orange;}}</style> 这个可选 scoped 属性会⾃动添加⼀个唯⼀的属性 (⽐如 data-v-21e5b78) 为组件内 CSS 指定作⽤域，编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover 但是，它并不能完全避免冲突<span data-v-0467f817 class="errShow">⽤户名不得为空</span> 以上⾯的代码为例，使⽤scoped之后，它在元素上添加了⼀个唯⼀的属性'data-v-0467f817'，CSS样式被编译如下.errShow[data-v-0467f817] {font-size: 12px;color: red;} 但是，如果⽤户也定义了⼀个errShow类名，会影响到所有定义为errShow类名的组件的显⽰ ⽽CSS modules则做的更彻底，它不是添加属性，⽽是直接改变类名<span class="_3ylglHI_7ASkYw5BlOlYIv_0">⽤户名不得为空</span> 这样，⼤⼤降低了冲突的可能性，只要不是⽤户直接给span标签设置样式，基本上不会影响组件的显⽰模块化 CSS Modules既不是官⽅标准，也不是浏览器的特性，⽽是在构建步骤中对CSS类名选择器限定作⽤域的⼀种⽅式（通过hash实现类似于命名空间的⽅法）。

CSSModules解决react项⽬css样式互相影响的问题1. CSS Modules引⼊⽬的 写过CSS的⼈，应该都对⼀⼤长串选择器选中⼀个元素不陌⽣吧，这种⽅式，其实定义的就是全局样式，我们时常会因为选择器权重问题，没有把我们想要的样式加上去。

另外，每次都需要把所有的样式表都导⼊到程序中，如果我们可以像使⽤js模块⼀样，想⽤哪块就⽤哪块，是不是就很理想了。

CSS Modules就解决了这个问题，它⾃动为每⼀个类⽣成⼀个哈希值，可以惟⼀标志这个类，因此避免了我们说的第⼀个问题，它让我们可以像使⽤js模块那样，想⽤哪部分样式，就引⼊哪部分样式。

下⾯我们来具体介绍它的使⽤⽅法。

2.CSS Modules使⽤⽅法 1) 如何在开启CSS Modules create-react-app 脚⼿架引⼊ css-modulesmodules:true,localIdentName:'[name]__[local]__[hash:base64:5]' webpack.config.dev.js{test: /\.less$/,exclude: /node_modules|antd\.css/,use: [require.resolve('style-loader'),{loader: require.resolve('css-loader'),options: {importLoaders: 1,modules:true,localIdentName:'[name]__[local]__[hash:base64:5]'},},{loader: require.resolve('postcss-loader'),options: {// Necessary for external CSS imports to work// https:///facebookincubator/create-react-app/issues/2677ident: 'postcss',plugins: () => [require('postcss-flexbugs-fixes'),autoprefixer({browsers: ['>1%','last 4 versions','Firefox ESR','not ie < 9', // React doesn't support IE8 anyway],flexbox: 'no-2009',}),],},},{loader: require.resolve('less-loader') // compiles Less to CSS}],},{test: /\.css$/,use: [require.resolve('style-loader'),{loader: require.resolve('css-loader'),options: {importLoaders: 1,},},{loader: require.resolve('postcss-loader'),options: {// Necessary for external CSS imports to work// https:///facebookincubator/create-react-app/issues/2677ident: 'postcss',plugins: () => [require('postcss-flexbugs-fixes'),autoprefixer({browsers: ['>1%','last 4 versions','Firefox ESR','not ie < 9', // React doesn't support IE8 anyway],flexbox: 'no-2009',}),],},},],}, webpack.config.prod.js{test: /\.less$/,exclude: /node_modules|antd\.css/,loader: ExtractTextPlugin.extract(Object.assign({fallback: {loader: require.resolve('style-loader'),options: {hmr: false,},},use: [{loader: require.resolve('css-loader'),options: {importLoaders: 1,modules:true,localIdentName:'[name]__[local]__[hash:base64:5]',minimize: true,sourceMap: shouldUseSourceMap,},},{loader: require.resolve('postcss-loader'),options: {// Necessary for external CSS imports to work// https:///facebookincubator/create-react-app/issues/2677 ident: 'postcss',plugins: () => [require('postcss-flexbugs-fixes'),autoprefixer({browsers: ['>1%','last 4 versions','Firefox ESR','not ie < 9', // React doesn't support IE8 anyway],flexbox: 'no-2009',}),],},},{loader: require.resolve('less-loader') // compiles Less to CSS}],},extractTextPluginOptions)),// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.},{test: /\.css$/,loader: ExtractTextPlugin.extract(Object.assign({fallback: {loader: require.resolve('style-loader'),options: {hmr: false,},},use: [{loader: require.resolve('css-loader'),options: {importLoaders: 1,minimize: true,sourceMap: shouldUseSourceMap,},},{loader: require.resolve('postcss-loader'),options: {// Necessary for external CSS imports to work// https:///facebookincubator/create-react-app/issues/2677ident: 'postcss',plugins: () => [require('postcss-flexbugs-fixes'),autoprefixer({browsers: ['>1%','last 4 versions','Firefox ESR','not ie < 9', // React doesn't support IE8 anyway],flexbox: 'no-2009',}),],},},],},extractTextPluginOptions)),// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.}, 2）CSS Modules⽤法 1.基本使⽤⽅法 在你的项⽬中，添加⼀个CSS⽂件，然后你就可以像引⼊js模块⼀样，在你的js⽂件中引⼊这个⽂件存放到⼀个对象中。

Vue3新特性之在CompositionAPI中使⽤CSSModules 在 Vue 3 Composition API 最近的⼀次 beta 升级中，⽆论是 Vue 3 本 3 库 vue-next，还是⾯向 Vue 2 过渡⽤的@vue/composition-api 库中，都同步更新了⼀个 useCSSModule 函数 -- ⽤来在使⽤了 Composition API 的 Vue 实例中，⽀持 CSS Modules 语法。

⾸先来看看什么是 CSS Modules：CSS ModulesCSS Modules 是⼀种 CSS 的模块化和组合系统。

vue-loader 集成 CSS Modules，可以作为模拟 scoped CSS 的替代⽅案。

启⽤ CSS Modules如果是使⽤ vue cli 创建的项⽬，应该已经默认开启了这⼀特性；如果项⽬中需要⼿动开启，按如下设置：// webpack.config.js{module: {rules: [// ... 其它规则省略{test: /\.css$/,use: ['vue-style-loader',{loader: 'css-loader',options: {// 开启 CSS Modulesmodules: true,// ⾃定义⽣成的类名localIdentName: '[local]_[hash:base64:8]'}}]}]}}或者与其它预处理器⼀起使⽤：// webpack.config.js -> module.rules{test: /\.scss$/,use: ['vue-style-loader',{loader: 'css-loader',options: { modules: true }},'sass-loader']}然后在组件中的 <style> 上添加 module 特性：<style module>.red {color: red;}.bold {font-weight: bold;}</style>在组件中访问 CSS Modules在 <style> 上添加 module 后，⼀个叫做 $style 的计算属性就会被⾃动注⼊组件。

React,TypeScript,CSSModule,Less,Antd遇到的坑序因为React 本⾝的脚⼿架⾃⾝在webpack中已经做了对CSS Module 的配置，因最近遇到了很多坑，所以从头整理了⼀遍使⽤版本"react": "^16.13.1","antd": "^4.4.0","typescript": "~3.7.2","webpack": "4.42.0","less": "^3.11.3","less-loader": "5.0.0",⼀. 安装和初始化---React and TypeScript请确保电脑上已经安装了最新版的或者。

使⽤ yarn 创建项⽬。

$ yarn create react-app antd-demo-ts --template typescript如果你使⽤的是 npm（接下来我们都会⽤ yarn 作为例⼦，如果你习惯⽤ npm 也没问题）。

$ npx create-react-app antd-demo-ts --typescript然后我们进⼊项⽬并启动。

$ cd antd-demo-ts$ yarn start⼆. CSS Module的使⽤1.在src⽬录下新建 css/index.module.css ⽂件.red{color: red;}2. 打开APP.tsx ⽂件新增以下代码 import React from 'react';import styles from './css/index.module.css'function App() {return (<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /><div className={styles.red}>哈哈啊哈</div></header></div>);}export default App;3. 你会发现style代码可以通过Js⽅式来使⽤，棒棒的4. 因为React脚⼿架⾃⾝⽀持.css, .Scss, .Sass ⽂件做了配置，所以如果有⽤scss的⼩伙伴可以直接使⽤scss，如想使⽤less，可查看后⾯5. 在src⽬录下新建 css/index.module.scss ⽂件，App.tsx 中引⽤，发现报错以下，提⽰需要安装Sass⽂件/src/css/index.module.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-6-4!./sr To import Sass files, you first need to install node-sass.Run `npm install node-sass` or `yarn add node-sass` inside your workspace.Require stack:5. 安装Sass和node-sass`npm install node-sass` or `yarn add node-sass`三. Less的使⽤----打开隐藏的webpack配置⽂件1. 查看webpack内部配置npm run eject2. 如果发现报错以下信息，表⽰你需要上传到git上⾯后再进⾏eject操作This git repository has untracked files or uncommitted changes:.CFUserTextEncoding.DS_Store.ShadowsocksX/.Trash/.android/.ant-devtool.json.anyproxy/.bash_history.bash_profile.bash_sessions/.cocoapods/.config/.fancy/.gitconfig.kaitian/.lesshst.local/.mysql_history.node-gyp/.npm/.npminstall_tarball/.nvm/.putty/.rncache/.sh_history.ssh/.taro/.taro2/.v8flags.7.0.276.38-node.19.e8d369a76bd6a0858b87990e6b1a3cfd.json.viminfo.vscode-react-native/.vscode/.vue-cli-ui/.vuerc.vuxrc/.wallaby/.yarnrcApplications/Desktop/Documents/Downloads/Library/Logs/Movies/Music/Pictures/Public/UI/WeChatProjects/gulpfile.js"iCloud \344\272\221\347\233\230\357\274\210\345\275\222\346\241\243\357\274\211/"image/mysql/workSpace/"\344\277\241\346\201\257\350\265\204\346\226\231/""\345\216\237\345\236\213/""\351\241\271\347\233\256\346\226\207\344\273\266/"Remove untracked files, stash or commit any changes, and try again.npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! react-demo@0.1.0 eject: `react-scripts eject`npm ERR! Exit status 1npm ERR!npm ERR! Failed at the react-demo@0.1.0 eject script.npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in:3. 在webpack中可以看到，webpack中已经配置了 CSS, SCSS, SASS 的Module，后续⽆需⾃⼰配置，4. 如果你想使⽤Less还需要⾃⼰去配置，以下是Less的操作步骤四. 安装 Less 和 Less-loader使⽤ yarn$ yarn add less less-loader或者使⽤ npm$ cnpm i less less-loader五. webpack中配置Less1. 在第⼆步的时候我们已经打开了config中webpack的配置，打开 config ⽂件夹，修改 webpack.config.js2. 搜索 cssRegex ，找到后添加两⾏代码const cssRegex = /\.css$/;const cssModuleRegex = /\.module\.css$/;const sassRegex = /\.(scss|sass)$/;const sassModuleRegex = /\.module\.(scss|sass)$/;const lessRegex = /\.less$/;const lessModuleRegex = /\.module\.less$/;3.修改 getStyleLoaders 函数，添加代码// common function to get style loadersconst getStyleLoaders = (cssOptions, lessOptions, preProcessor) => {const loaders = [isEnvDevelopment && require.resolve('style-loader'),isEnvProduction && {loader: MiniCssExtractPlugin.loader,options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},},{loader: require.resolve('css-loader'),options: cssOptions,},{loader: require.resolve('less-loader'),},{// Options for PostCSS as we reference these options twice// Adds vendor prefixing based on your specified browser support in// package.jsonloader: require.resolve('postcss-loader'),4. 搜索 cssRegex ，在 css 配置下添加 less 配置 {test: cssRegex,exclude: cssModuleRegex,use: getStyleLoaders({importLoaders: 1,sourceMap: isEnvProduction && shouldUseSourceMap,}),// Don't consider CSS imports dead code even if the// containing package claims to have no side effects.// Remove this when webpack adds a warning or an error for this.// See https:///webpack/webpack/issues/6571sideEffects: true,},// Adds support for CSS Modules (https:///css-modules/css-modules)// using the extension .module.css{test: cssModuleRegex,use: getStyleLoaders({importLoaders: 1,sourceMap: isEnvProduction && shouldUseSourceMap,modules: true,getLocalIdent: getCSSModuleLocalIdent,}),},{test: lessRegex,exclude: lessModuleRegex,use: getStyleLoaders({importLoaders: 1,sourceMap: isEnvProductionshouldUseSourceMap: isEnvDevelopment,},'less-loader'),sideEffects: true,},{test: lessModuleRegex,use: getStyleLoaders({importLoaders: 1,sourceMap: isEnvProductionshouldUseSourceMap: isEnvDevelopment,modules:{getLocalIdent: getCSSModuleLocalIdent, },},'less-loader'),},5. 保存后，重新启动项⽬6. 在src⽬录下新建 css/index.module.less ⽂件.red{color: yellow;}7. App.tsx 修改import React from 'react';import logo from './logo.svg';import styles from './css/index.module.less'function App() {return (<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /><div className={styles.red}>哈哈啊哈</div></header></div>);}export default App;8. 提⽰：index.module.less 找不到模块解决：修改 src/react-app-env.d.ts ⽂件，新增⼀下代码，到底部declare module '*.module.less' {const classes: { readonly [key: string]: string };export default classes;}9. 坑⼜来了, 提⽰使⽤less-loader与API模式不匹配的options对象初始化的Loader更少。

《深⼊解析CSS 》模块化CSS掌握浏览器如何渲染CSS 很重要，了解如何在项⽬中编写和组织CSS 也很重要。

组织CSS 代码使其更易于理解和维护。

模块化CSS （Modular CSS ）是指把页⾯分割成不同的组成部分，这些组成部分可以在多种上下⽂中重复使⽤，并且互相之间没有依赖关系。

最终⽬的是：当我们修改其中⼀部分CSS 时，不会对其他部分产⽣意料之外的影响。

我们把样式表的每个组成部分称为模块（module ），每个模块独⽴负责⾃⼰的样式，不会影响其他模块内的样式。

也就是说，在CSS ⾥引⼊了软件封装的原则。

CSS 中没有数据和传统函数的概念，但是有选择器及其命中的页⾯元素。

为了达到封装的⽬的，这些会成为模块的组成部分，并且每个模块都只负责少量的DOM 元素的样式。

有了封装的思想，我们就可以为页⾯上那些彼此分⽴的组件定义模块了。

像导航菜单、对话框、进度条、缩略图，等等。

可以通过为DOM 元素设置⼀个独⼀⽆⼆的的类名来识别每个模块。

同时，每个模块包含⼀系列⼦元素，构建成页⾯上的组件。

模块内部可以嵌套其他模块，最终构成完整的页⾯开始写模块化样式之前，需要先配置好环境。

每个样式表的开头都要写⼀些给整个页⾯使⽤的通⽤规则，这些规则通常被称为基础样式。

其他的样式是构建在基础样式之上的。

基础样式本⾝并不是模块化的，但它会为后⾯编写模块化样式打好基础：/*覆盖盒模型*/:root {box-sizing: border-box;}*,*::before,*::after {box-sizing: inherit;}/*默认字号与字体*/body {font-family: Helvetica, Arial, sans-serif;margin: 0;}其他常⽤的基础样式还包括链接的颜⾊、标题的样式、外边距等。

<body>标签默认的外边距很⼩，你可能会考虑将它的外边距去掉。

根据项⽬的实际情况，你也可能想为表单字段、表格和列表等添加⼀些样式。

webpack⾃动识别cssmodules（cssModule混⽤）期望达到的效果import Test from './test.less'; // 这样的引⼊需要css modulesimport './test.less'; // 这样的不需要css modules虽然 css-loader ⾃带⼀些配置可以⽤来配置是否开启当前⽂件cssModule（配置特殊的⽂件名，路径等），但是还是觉得没有上⾯的那种⽤起来⽅便。

参考的实现，源码：，通过写 Babel 插件，在 import 的 url 上加上参数，webpack 匹配这个参数，进⾏不同的配置。

这样的引⼊⽅式也可以消除开启 css module 后，ant design 组件样式出错的问题。

Babel 插件// scripts/plugin/auto-css-modules.jsconst { extname } = require('path');const CSS_EXTNAMES = ['.css', '.scss', '.sass', '.less'];module.exports = () => {return {visitor: {ImportDeclaration(path) {const { specifiers, source } = path.node;const { value } = source;if (specifiers.length > 0 && CSS_EXTNAMES.includes(extname(value))) {source.value = `${value}?css_modules`; // 在路径末尾加上 css_modules ⽤于 webpack 匹配该⽂件，如 import Test from './test.less'; 变成 import Test from './test.less?css_modules'; }},},};};在.babelrc中引⼊插件{"presets": ["@babel/preset-react","@babel/preset-env","@babel/preset-typescript"],"plugins": ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties","lodash","./scripts/plugin/auto-css-modules.js", // 引⼊插件["import", {"libraryName": "antd","libraryDirectory": "es","style": "css"}]]}在 webpack 中进⾏配置声明两个不同的loader配置// 未开启 css module 的 loaderconst cssLoader = ['style-loader',!isEnvDevelopment && {loader: MiniCssExtractPlugin.loader,},'css-loader',{loader: 'postcss-loader',options: {ident: 'postcss',plugins: () => [require('postcss-preset-env')({autoprefixer: {flexbox: 'no-2009',},stage: 3,}),],},},{loader: 'less-loader',options: {javascriptEnabled: true,},},];// 开启 css module 的 loaderconst cssModulesLoader = JSON.parse(JSON.stringify(cssLoader));cssModulesLoader[2] = {loader: 'css-loader',options: {modules: {localIdentName: '[local]_[hash:base64:5]',},},};webpack rules 配置：module: {rules: [{test: /\.(css|less)$/,oneOf: [{resourceQuery: /css_modules/, // 只要匹配到了这个，就是⽤css modules， use: cssModulesLoader.filter(Boolean),},{use: cssLoader.filter(Boolean),},],},]}这样配置后，就可以在项⽬中查看具体的效果了。

运⽤CSSinJS实现模块化⼀、什么是 CSS in JS2021-04-06-23-35-39是2014年推出的⼀种设计模式，它的核⼼思想是把 CSS 直接写到各⾃组件中，⽽不是单独的样式⽂件⾥。

CSS in js 的发展：最早就是内联样式依旧使⽤ CSS，但使⽤ JS 来管理样式依赖，代表是 CSS Modules。

这种⽅式在React框架中引⼊的。

使⽤ JavaScript ⽣成 CSS 然后插⼊到页⾯中的⽅式。

例如 Styled Components。

CSS Module 还是 JS 和 CSS 分离的写法，⽽ styled components 实际上是在 JS 上写 CSS了。

CSS in js ⼀次⼜⼀次的违背了 CSS 与 JS 分离的原则。

⼆、常见的 CSS in JS1、CSS ModulesCSS Modules 能最⼤化地结合现有 CSS ⽣态和 JS 模块化能⼒，API 简洁到⼏乎零学习成本。

（1）安装CSS Modules 提供各种，⽀持不同的构建⼯具。

本⽂使⽤的是 Webpack 的css-loader插件。

CSS Modules不局限于你使⽤哪个前端库，⽆论是 React、Vue 还是 Angular，只要你能使⽤构建⼯具进⾏编译打包就可以使⽤。

本⽂以 react 为例。

下同。

（2）全局/局部作⽤域CSS 是全局的，没有局部作⽤域的功能。

但 CSS Modules 默认有局部作⽤域的概念，实现的⽅法为：使⽤独⼀⽆⼆的 class 名。

这个独⼀⽆⼆的 class 名，是⼀个 hash 值，css-loader默认的⽣成算法是[hash:base64]，但 webpack 配置⾥⾯可以⾃定义格式。

CSS Modules 只会对className以及id进⾏转换，其他的⽐如属性选择器，标签选择器都不进⾏处理，推荐尽量使⽤className。

写法 - js：import style from './App.css';<h1 className={style.title_1}><h2 className={style.title_2}>写法 - css# 局部作⽤域的两种写法.title_1 {}:local(.title_1) {}# 全局作⽤域的两种写法:global(.title_2) {}:global {.title_2 {}# 还能继续添加……}⽣成 - html：<h1 class="_3zyde4l1yATCOkgn-DBWEL"><h1 class="title_2">⽣成 - css：._3zyde4l1yATCOkgn-DBWEL {}.title_2{}（3）拓展 - 实现局部作⽤域的⼏种做法1、嵌套（很深）选择器.widget .table .row .cell .content .header .title {}2、使⽤ BEM 的 class 命名规范⽤很长的有规则的命名，来尽量实现唯⼀标识className="widget__header--active"参考我之前的⽂章《》有介绍 BEM。

在React中使用CSS Modules时，可以使用嵌套写法来定义组件的样式。

首先，需要确保已经安装了`react-css-modules`库，并在项目中正确配置了CSS Modules。

然后，在组件中导入CSS Modules文件：```jsximport styles from './MyComponent.module.css';```接着，在组件的JSX中定义样式对象，并将其作为`style`属性传递给需要样式的DOM元素：```jsxfunction MyComponent() {const styles = useContext(MyComponentStyles);return (<div styleName="container"><h1 styleName="title">Hello, World!</h1></div>);}```在上面的代码中，`styleName`属性用于指定样式名称。

可以使用`useContext`钩子来从CSS Modules文件中导入样式对象。

在`context`中定义样式对象，然后在组件中将其导入：```jsximport { createContext } from 'react';export const MyComponentStyles = createContext();function MyComponent() {const styles = useContext(MyComponentStyles);return (<div styleName="container"><h1 styleName="title">Hello, World!</h1></div>);}```最后，在CSS Modules文件中定义嵌套的样式规则：```css.container {background-color: #f5f5f5;padding: 20px;}.title {font-size: 24px;color: #333;}```在上面的代码中，`.container`和`.title`是样式名称，它们分别应用于`<div>`和`<h1>`元素。

在React中写css样式的⼏种⽅案前端组件化开发中的CSS在⽬前整个前端都使⽤组件化开发的模式下，CSS样式的编写就成为了⼀个问题。

因为CSS也叫做层叠样式表，意思就是多个css样式作⽤于同⼀个HTML元素的时候，浏览器会根据权重的⼤⼩来进⾏覆盖，为元素应⽤权重最⾼的那⼀组css样式，很明显这种特性不适合组件化开发。

组件化开发模式下对于CSS解决⽅案的要求1. ⽀持编写局部的css，css具备⾃⼰的局部作⽤域，不会污染其他组件中的元素。

2. ⽀持编写动态的css，也就是元素的某些样式可以根据state/data中的某个属性来动态改变，其实也就是js去控制元素的css样式。

当属性的值变化的时候，样式也发⽣变化。

3. ⽀持所有的css新特性，⽐如伪类，位元素，动画，过渡，转化等等4. 编写⽅式简洁易上⼿，学习成本低，最好符合⼀贯的css风格特点React中的CSS缺陷相⽐于React，同为前端框架的Vue在css样式编写上要做的⽐React好，⽐如：1. Vue通过.vue⽂件中的style标签来编写属于当前组件的样式，⾼度样式⾏为相分离2. scoped属性⽤于防⽌当前组件的样式污染其他组件样式3. lang属性⽤于设置css预处理器如less，sass，stylus4. 通过:style的⽅法将data中的属性和样式连接起来，实现样式动态变化。

⼀般实现样式动态变化的⽅案：1. 动态为⼀个元素添加clss类名2. 通过style内联样式，将js中属性值和css样式联合起来React官⽅⼀致没有给出在React中统⼀的风格样式，普通的css，css modules以及css in js，很多种⽅案带来了上百种不同的库，到⽬前为⽌没有统⼀的⽅案。

⽅案⼀：使⽤style标签内联样式React官⽅推荐我们使⽤style标签内联样式这种写法来进⾏组件样式的编写，规定style标签接收⼀个采⽤⼩驼峰命名属性的js对象，⽽不是css字符串。

antdesignpro（六）样式⼀、概述 基础的 CSS 知识或查阅属性，可以参考。

⼆、详细介绍2.1、less Ant Design Pro 默认使⽤ less 作为样式语⾔，建议在使⽤前或者遇到疑问时学习⼀下的相关特性。

2.2、css modules 在样式开发过程中，有两个问题⽐较突出： 全局污染 —— CSS ⽂件中的选择器是全局⽣效的，不同⽂件中的同名选择器，根据 build 后⽣成⽂件中的先后顺序，后⾯的样式会将前⾯的覆盖； 选择器复杂 —— 为了避免上⾯的问题，我们在编写样式的时候不得不⼩⼼翼翼，类名⾥会带上限制范围的标识，变得越来越长，多⼈开发时还很容易导致命名风格混乱，⼀个元素上使⽤的选择器个数也可能越来越多。

为了解决上述问题，我们的脚⼿架默认使⽤ CSS Modules 模块化⽅案，先来看下在这种模式下怎么写样式。

// example.jsimport styles from './example.less';export default ({ title }) => <div className={styles.title}>{title}</div>;// example.less.title {color: @heading-color;font-weight: 600;margin-bottom: 16px;}⽤ less 写样式好像没什么改变，只是类名⽐较简单（实际项⽬中也是这样），js ⽂件的改变就是在设置 className 时，⽤⼀个对象属性取代了原来的字符串，属性名跟 less ⽂件中对应的类名相同，对象从 less ⽂件中引⼊。

局部样式与全局样式 在上⾯的样式⽂件中，.title只会在本⽂件⽣效，你可以在其他任意⽂件中使⽤同名选择器，也不会对这⾥造成影响。

不过有的时候，我们就是想要⼀个全局⽣效的样式呢？可以使⽤:global。