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

React官方脚手架与Less的兼容性问题（长沙网络推广实战分享）

React官方提供的脚手架工具为我们构建新的React单页面应用程序提供了最佳实践方式。但在其目前的版本（例如，React 官方脚手架 1.5.x 版本）中，构建的项目默认并不支持动态样式语言 Less。这对于需要使用 Less 的项目来说，可能会带来一些困扰。今天，长沙网络推广团队就来为大家分享如何手动集成 Less 到 React 项目中，为大家提供一个参考方案。

我们需要做好环境准备工作。使用 create-react-app 构建一个全新的 React 项目作为实验环境。如果你之前未曾使用过 create-react-app，可以通过以下命令全局安装（前提是你本机已经安装了 Node.js）：

npm install -g create-react-app

接下来，通过以下命令构建一个新的项目 my-app：

npx create-react-app my-app

进入项目文件夹后，执行 yarn start 命令启动程序。如果程序成功运行，那么实验环境就准备好了。最终的项目结构大致如下：

┌─node_modules （依赖模块文件夹）

├─public （公共资源文件夹）

├─src （源代码文件夹）

├─.gitignore （git忽略文件）

├─package.json （项目配置文件）

└─yarn.lock （Yarn锁定文件）

接下来，我们需要安装 less 和 less-loader。这两个工具的作用是将 less 文件编译成 css 文件，从而让 create-react-app 构建的项目能够 less 文件。通过以下命令将 less 和 less-loader 添加到项目中：

yarn add less less-loader

以上步骤完成后，还需要配置 webpack 来使用 less-loader。但令人困惑的是，我们在项目中找不到 webpack 的配置文件。这是因为脚手架为了实现“零配置”，将一些通用的脚本和配置集成到了 react-scripts 中。我们通常不需要关心环境配置，只需要专注于 src 目录下的开发工作即可。如果我们需要自定义环境配置怎么办？答案是使用 yarn eject 命令。这个命令会将原本被集成的配置和脚本暴露出来。以下是关于 yarn eject 命令的简要介绍：

yarn eject

移除此工具并将构建依赖项、配置文件和脚本复制到应用程序目录中。执行此操作后，无法撤销！请谨慎操作。执行该命令后，我们就可以在项目中找到 webpack 的配置文件，然后进行自定义配置，包括配置 less-loader。至此，我们就可以在 React 项目中使用 Less 了。具体的配置方式可以参考 webpack 的文档进行了解。长沙网络推广团队希望通过此次分享能帮助到大家解决 React 官方脚手架不支持 Less 的问题，并为大家提供有益的参考。执行yarn eject后的react-scripts项目已经为你完成了大量的配置工作，使得webpack的配置文件得以暴露。具体的操作过程如下：

当你执行`react-scripts eject`命令后，你的项目会进行一系列的调整。这些调整包括添加新的配置文件，更新依赖项以及更新脚本。这个过程实质上是在将原本由react-scripts内部管理的webpack配置过程移出，变为直接在你的项目中进行管理。也就是说，你拥有了原本隐藏在背后的webpack配置文件的直接控制权。这些文件包括webpack的开发环境配置、生产环境配置等。

在这个过程中，新的配置文件会被添加到你的项目中，例如`webpack.config.dev.js`和`webpack.config.prod.js`等，这些都是webpack的配置文件。这些文件包含了关于模块打包、代码转换、优化等的重要信息。

然后，你需要更新你的依赖项。一些新的依赖项会被添加到你的项目中，例如webpack、webpack-dev-server等，这些都是用于帮助你进行模块打包和开发的工具。一些原有的依赖项可能会被移除或者更新。

你需要更新你的脚本。原本通过`react-scripts`运行的脚本，现在需要改为通过新的脚本运行。例如，原本通过`react-scripts start`启动项目，现在需要改为通过`node scripts/start.js`启动。

执行yarn eject后，你就可以在你的项目中直接访问和修改webpack的配置文件了。你可以根据自己的需求对配置文件进行修改，以达到优化你的项目构建过程、提高开发效率的目的。但是需要注意的是，一旦执行了eject操作，你就需要自行管理和维护这些配置，这也可能带来一些额外的复杂性。在执行eject操作前，你需要充分了解其影响并谨慎考虑。create-react-app的进阶配置：支持Less样式的开发流程

你是否厌倦了默认的CSS样式配置，并想尝试一些新的东西？那么，今天我们将一起如何在create-react-app项目中引入Less样式。没错，只需运行yarn eject，即可开启新的之旅。

在你的实验项目目录中，你会看到一个新出现的config文件夹，其中包含了三个关于webpack的配置文件。它们分别是：

webpack.config.dev.js - 开发环境配置

webpack.config.prod.js - 生产环境配置

webpackDevServer.config.js - 开发服务器配置

我们的关注重点在前两个文件上，特别是关于本地开发服务器

找到module.rules节点下的css文件的加载规则。我们需要做的是将原有的css加载规则进行扩展，以支持Less文件。具体步骤如下：

1. 将test: /\.css$/修改为test: /\.(css|less)$/，这样既可以加载css文件，也可以加载less文件。

2. 在use数组中添加一个新的对象元素，指定为{loader: require.resolve('less-loader')}，以处理less文件的加载。

修改后的配置文件部分代码如下：

{

test: /\.(css|less)$/,

use: [

// 其他加载器...

{ loader: require.resolve('less-loader') }

]

}

至此，我们已经完成了create-react-app对Less的支持配置。接下来，我们来进行效果验证。

在src根目录下创建一个名为Test.less的Less文件，写入一些Less语法。然后，在App.js文件中通过import语句导入这个Less文件。运行yarn start命令启动程序，如果看到App标题的颜色变为红色，那么就说明我们的配置成功了。

虽然引入Less样式需要一些配置工作，但一旦完成，你就可以在React项目中使用更丰富的样式语法，提高开发效率和体验。这就是我们今天的全部内容，希望对大家的学习有所帮助。也希望大家能够支持狼蚁SEO，一起分享更多的技术知识和经验。

我会把每一句话都视为一件艺术品，用心雕琢每一个词汇，让其在文章中发挥最大的作用。我会让文章在逻辑严谨的充满诗意和韵律，让读者在阅读的过程中感受到美的享受。