React16.9配置支持Less文件的开发环境

React16.9配置支持Less文件的开发环境

基于脚手架 create-react-app 快速构建一个react 工程项目结构

• 自动安装react 的核心组件 ： REACT / REACT-DOM
• 自动安装webpack ,并且完成相关的配置

【使用脚手架】

• npm install create-react-app -g 把脚手架安装到全局环境下，以后应用命令操作，完成项目结构的搭建
• 创建项目结构目录 （项目名遵循NPM发包规范：名字只能是/¹$/） npx create-react-app 项目名
• 特点：如果当前电脑安装了 YARN，创建工程目录的时候，走的是yarn安装，yarn和NPM 主体相同，但是处理还有一定的区别，索引我们以后继续向工程中安装模块以及执行配置脚本打包编译的时候，尽可能使用 yran ，不建议混用

【暴露wepback配置项】

• 脚手架构建项目的时候，为了结构的美化，把所有的webpack配置等都隐藏到了 NODE_MODULES中（react-scripts等），真实项目中，我们经常会基于脚手架构建的结构组件在安装配置一些信息（例如：less处理的配置），此时我们需要把配置项暴露出来
  • yarn eject 此操作是不可逆转的而且操作之气那需要把所有修改的文件提交到git
  • |- config
    | |- webpack.config.dev.js 开发环境下的WP配置
    | |- webpack.config.prod.js 生产环境下的WP配置
    | |- paths.js 基本配置项（包含项目的入口信息）
    | |- …
    |
    |- scripts
    | |- start.js / build.js / test.js 当我们执行yarn start/build/test的时候，执行的就是这三个JS文件

【基于脚手架配置LESS】

• 安装LESS 和对应的加载器
• yarn add less less-loader
• 修改 开发和 生产环境下的webpack 配置项
• 修改开发和生产环境下的WEBPACK配置项

【配置less-loader】
配置less-loader需要暴露webpack配置文件，这就要使用create-react-app脚手架工具提供的 eject 命令（见上图），运行命令前需要将项目commit一下，否则项目无法eject成功，打开终端运行 yarn eject命令（或者npm run eject），eject命令是一次性命令，运行后无法恢复

yarn eject

命令运行结束之后会发现package.json 文件中多了很多内容，项目结构中多了一个config文件夹

打开config文件夹，找到webpack.config.js文件打开，主要修改里面的三处地方：

1、修改style files regexes（样式文件正则），找到 注释style files regexes，在这部分最后添加如下两行代码：

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

2、修改 getStyleLoaders 函数，添加代码（如图）

3. 最后一处修改大约在450行，模仿代码中提供的sassRegex代码，添加如下代码，如下图

修改完成

---

1. a-z0-z_- ↩︎