React项目集成Less

为什么要使用Less？

Less是动态的样式表语言，通过简洁明了的语法定义，使得编写 CSS的工作变得非常简单。在实际项目开发中，可以大大提升前端工程师的效率！

CSS（层叠样式表）是一门历史悠久的标记性语言，同HTML一道，被广泛应用于万维网中。HTML主要负责文档结构的定义，css负责文档表现形式或样式的定义。
作为一门标记语言，CSS的语法相当简单，对使用者的要求较低，但同时也带来一些问题。CSS需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码，造成这些困难的很大原因源于CSS是一门非程序语言，没有变量、函数、scop（作用域）等概念。

Less为Web开发者带来了福音，它在CSS的基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。

React项目中如何集成Less?

一、增加项目依赖

yarn add less
yarn add less-loader

二、暴露React项目webpack相关的config文件夹（方便手动更改配置项）

yarn eject

三、修改项目config文件夹下webpack.config.js文件（两处修改）

第一处修改.png

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

第二处修改.png

{
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 2,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              },
              'less-loader'
              ),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },
            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
            // using the extension .module.css
            {
              test: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 2,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: {
                  getLocalIdent: getCSSModuleLocalIdent,
                },
              },
              'less-loader'
              ),
 },

修改完成后重新运行项目就可以使用Less!🍉🍉🍉

最后编辑于：2020.05.18 14:16:08