如何解决React官方脚手架不支持Less的问题

如何解决React官方脚手架不支持Less的问题

说在前面

create-react-app 是由 React 官方提供并推荐使用构建新的 React 单页面应用程序的最佳方式，不过目前版本(1.5.x)其构建的项目中默认是不支持动态样式语言 Less 的。如果我们的项目必须要使用 Less 呢，这就需要我们手动集成一下。本篇主要针对集成的过程做一个简要记录。

环境准备

本小节先用 create-react-app 构建一个全新的 React 项目作为实验环境。

如果您之前未曾使用过 create-react-app，请先通过如下命令全局安装（假定您本机已经安装了 Node.js）：

npm install -g create-react-app

然后，通过如下命令构建一个新的项目my-app：

npx create-react-app my-app

通过cd my-app命令进入项目文件夹，执行yarn start命令启动程序，成功运行，则实验环境准备完毕。

最终项目结构：

┌─node_modules 
├─public
├─src           
├─.gitignore
├─package.json
├─README.md
└─yarn.lock

安装 less & less-loader

要使 create-react-app 构建的项目能正常解析 less 文件，只需要让 webpack 能够把 less 文件编译成 css 文件即可。

所以，首先要把 less 和 less-loader (less 编译器)添加到项目中：

yarn add less less-loader

这样就 OK 了？以上只是在项目中安装了 less 和 less-loader ，但还未曾通过 webpack 使用 less-loader。

至于怎么使用？几种使用方式？请参见 webpack 文档 ，这里不再赘述。

假定您已经仔细阅读过上述 webpack 文档，想必您也清楚我们应该选择在文件中配置 less-loader。

暴露 webpack 配置文件

突然，您会发现在我们实验项目中找不到 webpack 相关配置文件。

因为脚手架为了实现“零配置”，会默认把一些通用的脚本和配置集成到 react-scripts，目的是让我们专注于src目录下的开发工作，不再操心环境配置。同时，被其集成的脚本和配置也会从程序目录中消失 ，程序目录也会变得干净许多。

如果我们要自定义环境配置怎么办？

项目构建完成后，会提供一个命令yarn eject，通过这个命令，我们可以把被 react-scripts 集成的配置和脚本暴露出来。

以下是脚手架关于yarn eject命令的介绍：

yarn eject
Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!

大概意思是，执行该命令后会把已构建依赖项、配置文件和脚本复制到程序目录中。该操作是不可逆转的，执行完成后会删除这个命令，也就是说只能执行一次。

至于 react-scripts 都集成了哪些东西，通过yarn eject命令的执行记录也能看出个大概：

λ yarn eject
yarn run v1.6.0
$ react-scripts eject
? Are you sure you want to eject? This action is permanent. Yes
Copying files into E:Reactmy-appAdding configenv.js to the projectAdding configpaths.js to the projectAdding configpolyfills.js to the projectAdding fig.dev.js to the projectAdding fig.prod.js to the projectAdding fig.js to the projectAdding configjestcssTransform.js to the projectAdding configjestfileTransform.js to the projectAdding scriptsbuild.js to the projectAdding scriptsstart.js to the projectAdding scriptstest.js to the projectUpdating the dependenciesRemoving react-scripts from dependenciesAdding autoprefixer to dependenciesAdding babel-core to dependenciesAdding babel-eslint to dependenciesAdding babel-jest to dependenciesAdding babel-loader to dependenciesAdding babel-preset-react-app to dependenciesAdding babel-runtime to dependenciesAdding case-sensitive-paths-webpack-plugin to dependenciesAdding chalk to dependenciesAdding css-loader to dependenciesAdding dotenv to dependenciesAdding dotenv-expand to dependenciesAdding eslint to dependenciesAdding eslint-config-react-app to dependenciesAdding eslint-loader to dependenciesAdding eslint-plugin-flowtype to dependenciesAdding eslint-plugin-import to dependenciesAdding eslint-plugin-jsx-a11y to dependenciesAdding eslint-plugin-react to dependenciesAdding extract-text-webpack-plugin to dependenciesAdding file-loader to dependenciesAdding fs-extra to dependenciesAdding html-webpack-plugin to dependenciesAdding jest to dependenciesAdding object-assign to dependenciesAdding postcss-flexbugs-fixes to dependenciesAdding postcss-loader to dependenciesAdding promise to dependenciesAdding raf to dependenciesAdding react-dev-utils to dependenciesAdding resolve to dependenciesAdding style-loader to dependenciesAdding sw-precache-webpack-plugin to dependenciesAdding url-loader to dependenciesAdding webpack to dependenciesAdding webpack-dev-server to dependenciesAdding webpack-manifest-plugin to dependenciesAdding whatwg-fetch to dependenciesUpdating the scriptsReplacing "react-scripts start" with "node scripts/start.js"Replacing "react-scripts build" with "node scripts/build.js"Replacing "react-scripts test" with "node scripts/test.js"Configuring package.jsonAdding Jest configurationAdding Babel presetAdding ESLint configurationEjected successfully!Please consider sharing why you ejected in this survey: in 5.37s.

说了这么多，现在怎样才能在我们的项目中暴露 webpack 的配置文件？没错，你没猜错，只需要运行一下yarn eject即可。

再来看我们的实验项目的目录，您会发现其中多了一个config文件夹，其中就有三个关于 webpack 的配置文件：

我们需要关注的是前两个，最后一个是关于本地开发服务器localhost:3000的一些相关配置。

修改 webpack 配置

理论上讲，需要同步修改 和 配置文件：

在module.rules节点中找到 css 文件的加载规则：

1. test: /.css$/ 修改为 test: /.(css|less)$/；
2. 在use数组最后新增一个对象元素{loader: solve('less-loader')}。

修改完成后：

// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use a plugin to extract that CSS to a file, but
// in development "style" loader enables hot editing of CSS.
{test: /.(css|less)$/,use: [solve('style-loader'),{loader: solve('css-loader'),options: {importLoaders: 1,},},{loader: solve('postcss-loader'),options: {// Necessary for external CSS imports to work// : 'postcss',plugins: () => [require('postcss-flexbugs-fixes'),autoprefixer({browsers: ['>1%','last 4 versions','Firefox ESR','not ie < 9', // React doesn't support IE8 anyway],flexbox: 'no-2009',}),],},},{loader: solve('less-loader')}],
},

至此，就已经完成了create-react-app 对 Less 的支持。

效果验证

最后，在我们的实验项目中验证一下配置是否生效。

首先在src根目录下使用 Less 语法创建一个 less 文件，取名为Test.less：

@title-color:#f00;.App-title {color: @title-color}

然后在App.js文件中通过如下API导入上述的 less 文件：

import './Test.less';

再次yarn start运行我们的程序，如果标题Welcome to React变成红色则说明配置没有问题。