React入门系列 目录导引
上一篇：React入门（1）——我的第一个React.js项目
创建日期: 2020年2月28日
题记：着急入门的，可以直接看第三部分，通过引入.less渲染组件
一. css和less是什么
CSS 是层叠样式表( Cascading Style Sheets )的简称。用于渲染HTML式样的。CSS的读取是有自己的规则的，从右至左。当项目大点，类名相同时，难免会发生覆盖。从代码中看，明明已经设置了，但是为什么不起作用呢？为了解决这种问题，于是，有了 CSS Modules方案。
Less（Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。可以解决上面提到的覆盖问题。
less与css区别总结：
1、Less是一门CSS预处理语言，css是一种用来表现HTML或XML等文件样式的计算机语言。
2、less扩展了CSS语言，增加了变量、Mixin、函数等特性。
3、css可以被浏览器直接识别，less需要先编译为css。
二.通过引入.css渲染组件
1. 在.js文件中引入css文件，并通过设置className来实现
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'
import './styles.css'
const App = () => {
return (
<div className="background1">
<div className="background2">
<h1>测试</h1>
</div>
</div>
)
}
ReactDOM.render(<App />, document.getElementById('root'));
//index.css
.background1 {
width: 100%;
height: 1200px;
background-color: #303855ff;
}
.background2 {
background-color: yellow;
width:200px;
height: 100px;
}
//styles.css
.background2 {
background-color:red;
width:200px;
height: 100px;
}
我们可以看到，内层的div的背景是红色的，是被styles.css中定义的background2覆盖的。如果，我们在文件import的时候，调换index.css和styles.css的位置，那么谁在下面，谁将起作用。换言之，当className相同时，后import的css文件，会覆盖掉之前import的css文件。
另一种情况，我们删掉index.js里styles.css的import，在index.css中import styles.css:
//index.css
@import "styles.css";
.background1 {
width: 100%;
......
我们发现，内层的div背景变成黄色的了，也就是说，这种写法，index.css文件，覆盖了styles.css。这种覆盖方式，暂时叫做“后来者居上”，这样，是不是好记点。按着代码执行顺序进行，后设置的式样，会覆盖之前设置的式样。可以挑战下这一篇链接，猜猜这个作者之前描述的代码，会是什么效果呢？想深入了解CSS执行顺序的，也建议看看，作者分析的很细致。
三. 通过引入.less渲染组件
1.首先，要先安装less和less-loader
$ npm install --save-dev less-loader less
遗留问题：为什么我按官网的命令去安装less，在package.json里面不会显示，而用上面的方式，就会显示呢？需要查下npm的子命令了。[参考]
安装后，我们会看到package.json文件中，添加了依赖：
"devDependencies": {
"less": "^3.11.1",
"less-loader": "^5.0.0"
}
Dependencies和devDependencies到底有什么区别呢？[参考链接]
2.修改webpack配置
哇啊！好尴尬😅，翻了半天，也没找到网上说的webpack.config.js文件，原因看这个。
下面这个命令，谨慎执行，因为不可逆。但是只要做好代码版本管理，可以随意折腾，大不了重头再来版本管理git的使用
STEP 1:
$ yarn eject
执行的时候，有提示:NOTE: Create React App 2+ supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html
因为，执行该命令后会把已构建依赖项、配置文件和脚本复制到程序目录中。该操作是不可逆转的，执行完成后会删除这个命令，也就是说只能执行一次。
插曲：执行的时候，被git给阻挡了，因为是在学习，所以我直接用
$ find . -name ".git" | xargs rm -Rf
用这个命令把git给清除了。如果是项目，自己按照提示，把git相关的commit，stash什么的，处理完毕就好。
执行完毕后，package.json文件被更改了，与此同时，会生成新文件夹config：
STEP 2:
修改webpack.config.js配置文件。我们找到sassRegex，模仿它来配置lessRegex。
(1).配置less
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/; //这一句和下一句是新增的less的配置
const lessModuleRegex = /\.module\.less$/;
(2).配置less-loader
找到"test: sassRegex"这个，搜一下即可，然后模仿这个来写less的。
// Adds support for CSS Modules, but using LESS
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
modules: true,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
},
这里，我先直接copy了sass的配置，然后改成less，运行后不好用。之后，又在lessRegex里加了一句modules: true,才可以运行。致于 importLoaders: 3，这后面的数字，是3，是1，都好用，没有查具体意义。
3.修改代码
import styles from './styles.less'
......(省略中间代码)
<div className={styles.background2}>
......(省略之后的代码)
这里，引入less文件，作为styles，设置className的时候，将原本的双引号，改成花括号。至此，less的引用成功。
配置的时候请注意：关于 less 配置规则放在 sass 的解析规则下面即可，如果放在了 file-loader 的解析规则下面，less 文件解析不会生效。(这段注意来自于网络，没有验证过）
关于引用less文件，还有一种更优雅的配置方案，不需要用eject暴露webpack文件。
下一篇：React中使用less(use CSS Modules)的两种配置方法
参考链接1：样式设置和CSS文件引入
参考链接2: CSS预处理器LESS、SASS使用教程
参考链接3: 学习Less-看这篇就够了
参考链接4： create-react-app使用less最详细说明
