React 使用 less 预处理语言. 并设置单组件作用域

创建项目

1. 使用 react 脚手架工具快速搭建一个项目，项目名：admin1
create-react-app admin1
2. 创建完成之后 cd 到项目目录
3. 安装 less 预处理语言和 less-loader 编译插件
   npm install less less-loader
   安装完之后是不能直接使用的。

项目目录中没有config文件夹 ?

4. 配置webpack.config.js文件，正在项目目录下的 config 目录
   有些人可能是没有config目录，是因为 react 脚手架工具默认把所有的项目依赖打包起来。
   打开依赖包的方法:
   npm run eject

   按下回车之后会提示: 是否要打开这些依赖包。 此操作是不可回退的。
   输入 y 确定。
   
   当操作到这一步的时候会报错（👀 刚才忘记了…）
   报错信息大致翻译如下: 本地仓库有两个文件修改但是未做提交。
   解决办法： 使用 git 指令进行一次本地仓库提交
   
   如下图: 提交信息自己随便写
   
   这之后再执行npm run eject -> y 回车
   然后就会出现以下代码。
   简译： 弹出成功！ 分阶段弹出文件以进行提交。你可以在下面的网站进行文件调查，打开项目集合包的原因。
   
   这之后就会在我们的项目目录下出现一个 config 文件夹。
   在文件夹下找到 webpack.config.js 打开进行修改
   Ctrl + F 全局搜索 sass，因为 react 默认支持的是 sass 预编译语言。
   
   是从这里开始， 第二个查找到的目标
   如图查找到的 sass 都修改为 less。只有如图中的需要修改，其他不需要修改
   
   
   
   现在 less 已经可以使用了，写一个 demo 来看一看
   我用一个最 ‘亮眼’ 的颜色。

// app.js
import React from 'react';
import './app.less'

function App() {
  return (
    <div className="App">
      <h2 className="test">React 中 less 的使用</h2>
    </div>
  );
}

export default App;

// less
@blue: blue;
@red: red;
.test {
  color: @red;
  background: @blue;
}

看一下页面效果，😃 是不是特别的亮眼。

然后我再新建一个 Box 组件，同样添加一个 标签， 类名也为 test。然后在app.js 中引入并使用看一下效果

// Box
import React, { Component } from "react";

class Box extends Component {
  render () {
    return (
      <div>
        <h3 className="test">这里是 Box 组件</h3>
      </div>
    )
  }
}
export default Box

// App.js
import React from 'react';
import './app.less'
import Box from './Box'

function App() {
  return (
    <div className="App">
      <h2 className="test">React 中 less 的使用</h2>
      <hr/>
      <Box></Box>
    </div>
  );
}

export default App;

我们来看一下效果

Box组件里面并没有引入样式文件，但是 Box 组件中也被渲染了 css样式。

在 React 中没有像 Vue 里面一样的给 css 部分添加 scoped 作用域。
解决办法：
方法1: 这个方法可能听起来像说的是废话。
起类名的时候不冲突，BEM 命名法 (这里我就不解释BEM命名法了，看一下度娘给的答案 🙄)

方法2: 使用样式模块化。
对比一下：

• 正常引入: import './xxx.less'
• 模块化引入:
  需要修改 less 文件名为xxx.module.less
  引入方法: import 自定义名字 from './xxx.module.less'
  在标签上使用的方法: <div className={ 自定义名字.test }></div>
  看一下小栗子:

1. 先把 less 文件名修改为
   
2. 引入的时候使用 import style from './app.module.less'

在标签上添加类名的方法
引入的 less + . + 类名
id名也是同样的使用方法

// app.js
import React from 'react';
import style from './app.module.less' // 引入方式
import Box from './Box'

function App() {
  return (
    <div className="App">
    	// 在标签上添加类名的方法
    	// 引入的 less + . + 类名
    	// id名也是同样的使用方法
      <h2 className={ style.test }>React 中 less 的使用</h2>
      <hr/>
      <Box></Box>
    </div>
  );
}

export default App;

再来看一下效果