less和sass支持 css modules 一样的局部环境和使用方式，解决重名样式覆盖的问题

 安装

npm install --save-dev node-sass sass-loader

• css-loader： css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样。
• style-loader 将css插入到页面的style标签
• less-loader 是将less文件编译成css

问题：项目是使用直接css、less、sass会造成样式覆盖问题，例如

会造成Demo2的样式覆盖Demo1中的样式。

并且页面中css使用方式：

在css中我们可以使用css modules解决，但是项目css文件就必须使用xxx.module.css,

还有在less和sass中怎么解决呢？

方案1：

在webpack.config.js中配置css-loader

			{
				loader: require.resolve("css-loader"),
				options: {
					...cssOptions,

					modules: {
						localIdentName: "[path][name]-[local]",
					},
					importLoaders: 1,
				},
			},

modules: {

localIdentName: "[path][name]-[local]",

}

生成css类名方式

path:css文件所在的目录名，例如在src的components目录下的index.scss文件，那么path值就是src-components-，name值是index

name:css文件的名称

local：在组件上的className

如果有需要还是在后面加上css文件的哈希值。例如

			{
				loader: require.resolve("css-loader"),
				options: {
					...cssOptions,

					modules: {
						localIdentName: "[path][name]-[local]-[hash:base64:5]",
					},
					importLoaders: 1,
				},
			},

同时修改项目中css引入方式例如

import React, { useEffect, useState } from "react";
import styles from "./style.scss";

const Demo2 = () => {
    return <div className={styles.content}></div>;
};

export default Demo2;

导入样式是以使用对象方式导入，这种酒喝umi中的方式相同。

umi会在所有class类名前面加上.antd-pro-。 

方案2:

配置webpack css-loader

			{
				loader: require.resolve("css-loader"),
				options: {
					modules: true,
					importLoaders: 1,
				},
			},

这也可以，但是这样配置代码中的样式就看不到样式本身的写法了

 不利于开发。

参考

• 实现思路：所有的样式文件最终都会转换成 css 代码，都需要使用 css-loader ，所以就可以借助 css-loader 的 modules 配置实现 less 的 modules 用法。
• 存在的问题：公共样式也使用的 less ，这样的配置岂不是把公共样式的类名也改变了，导致业务无法使用公共样式。
  • 解决思路：
    • 1、业务样式文件和公共样式文件使用不同的命名，然后在 为 loader 匹配文件时，做不同的处理。
    • 2、 使用 include 和 exclude 配置项对公共样式文件区分，以实现 公共样式 less 类名不处理

解决思路2  在loader的options配置中使用正则来排除不需要处理的文件

css-loader配置模块化时排除某些css文件方法

			{
				loader: require.resolve("css-loader"),
				options: {
					modules: {
						auto: /(?<![\\/]src[\\/]styles[\\/]\w*)\.scss$/,
						localIdentName: "[path][name]-[local]",
					},
					importLoaders: 1,
				},
			},

增加auto配置，这个正则是排除src/styles目录下所有.scss文件。

对于sass公共样式使用sass-resources-loader。

webpack配置

const srcPath = path.resolve(__dirname, "../src");

加载src/style目录下的公共样式。

这些公共样式主要是我们定义的一些变量。

然后其他样式文件引入了这些公共样式，当然如果不配置sass-resources-loader，那么我们就需要在每个用到公共样式的样式文件里面使用@import 导入这些公共样式。甚至在组件里面使用公共样式也需要导入，太麻烦。

类似文章推荐 CSS Modules 解决 react 项目 css 样式互相影响的问题 - 尚码园