如何解决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 文档，想必您也清楚我们应该选择在webpack.config.js文件中配置 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
"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.json
 Adding Jest configuration
 Adding Babel preset
 Adding ESLint configuration

Ejected successfully!

Please consider sharing why you ejected in this survey:
 http://goo.gl/forms/Bi6CZjk1EqsdelXk1

Done in 5.37s.

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

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

webpack.config.dev.js    # 开发环境配置
webpack.config.prod.js   # 生产环境配置
webpackDevServer.config.js # 开发服务器配置

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

修改 webpack 配置

理论上讲，需要同步修改 webpack.config.dev.js 和 webpack.config.prod.js 配置文件：

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

1.test: /\.css$/ 修改为 test: /\.(css|less)$/；
2.在use数组最后新增一个对象元素{loader: require.resolve('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: [
  require.resolve('style-loader'),
  {
   loader: require.resolve('css-loader'),
   options: {
    importLoaders: 1,
   },
  },
  {
   loader: require.resolve('postcss-loader'),
   options: {
    // Necessary for external CSS imports to work
    // https://github.com/facebookincubator/create-react-app/issues/2677
    ident: '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: require.resolve('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变成红色则说明配置没有问题。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。