idea module取得是parent的文件路径_React(或使用TS)中样式混乱解决方案 *.module.less…

使用.module.css / .module.less / .module.scss避免样式混乱

先说写这一篇文章的出处，在之前feizhu-react这各项目中使用了基础的css样式，但是写到后来就有样式污染的情况

使用react练习飞猪项目​github.com

接下来就说一下怎样在项目中使用less和怎样使用 module.less

1. 得先安装 less less-loader， 声明 react版本16.13.1

yarn add less less-loader

2. 因为less react官方没有内置支持，所以需要修改一配置文件

2.1 在项目中config目录中的webpack.config.js文件中修改以下内容const lessRegex = /.less$/;
const lessModuleRegex = /.module.less$/;%sass不用做任何修改%
%直接 yarn add sass-loader node-sass就可以直接使用，不用在webpack.config.js做任何配置%

2.2 添加其他解析模块，如下图
你可以吧上面的sass的复制一下，将sassRegex / sassModuleRegex 修改为 lessRegex / lessModuleRegex{test: lessRegex,exclude: lessModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction && shouldUseSourceMap,},'less-loader'),sideEffects: true,},{test: lessModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction && shouldUseSourceMap,modules: {getLocalIdent: getCSSModuleLocalIdent,},},'less-loader'),},

修改这写之后就重新启动项目去使用less去写样式

1. 我们在组件中创建Hello.js组件,就像下面这样

import React from 'react'
import hello from './hello.module.less'/*使用typescript开发react时候引入 *.module.less有所不同*/
// const hello = require('./hello.module.less')const Hello = () => {return (<div className={hello.parent}><div>第一层视图</div><div className={hello.son}>第二层视图</div>{/*多个类名*/}<div className={`${hello.basestyle} ${hello.three}`}>第三层视图</div></div>)
}export default Hello

2. 在同级目录创建 hello.module.less

.parent {background-color: #ccc;.son {color: skyblue;}.three {margin: 20px;color: red;}}
.basestyle {font-size: 100px;
}

这样写是可以避免样式污染的，因为在页面上类名就是随机的，所以不会项目影响，下图：