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 样式互相影响的问题 - 尚码园

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

在react中使用css modules解决组件之间样式覆盖问题
今天在写react项目的时候发现两个组件之间相同类名之间样式会发生覆盖的问题,上网查了一下,大佬们都推荐使用css IN JS 简单介绍一下自己的使用:come on baby 介绍:css in j ...
reactjs css modules解决组件间样式覆盖问题
css模块化及CSS Modules使用详解
什么是css模块化? 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合.分解和更换的单元.模块化是一种处理复杂系统分解成为更好的可管理模块的方 ...
被尤雨溪diss的Native CSS Modules是什么
前天早上正吃着早饭,唱着歌,开开心心摸鱼时,看到一条尤大的推文: 尤:老实说,我认为Native CSS Modules标准是仓促的,再次显示了参与该标准制定过程的人的傲慢经常看尤大和其他大佬们交流 ...
CSS Modules和Styled Components
前言由于 React的JSX语法,能在React中使用样式的方式有很多,本文主要介绍在React中经常使用CSS样式的五种方法: //1行内样式 // 2声明样式 // 3引入样式 // 4 CSS ...
CSS Modules 用法教程
学过网页开发就会知道,CSS 不能算编程语言,只是网页样式的一种描述方法. 为了让 CSS 也能适用软件工程方法,程序员想了各种办法,让它变得像一门编程语言.从最早的Less.SASS,到后来的 Po ...
CSS Modules入门教程
为什么引入CSS Modules 或者可以这么说,CSS Modules为我们解决了什么痛点.针对以往我写网页样式的经验,具体来说可以归纳为以下几点: 全局样式冲突过程是这样的:你现在有两个模块,分 ...
浅谈CSS Modules以及CSS Modules在Vue.js上的使用
前言在平常的开发或者学习中,我们可能会有意无意的接触到CSS Modules.那CSS Modules到底是什么呢?现在,我将带你走进CSS Modules,去了解它的始末.本文将从什么是CSS ...
CSS：CSS Modules
一.背景在编写代码的时候,经常会出现同名而被覆盖样式的可能,特别是大量使用组件的项目,添加css Modules可以减少这样的冲突. 二.什么是CSS Modules 根据CSS Modules的 ...

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

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

最新文章

热门文章