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

在前面说

Create-React-app是构建新的React单页应用程序的最佳方式，由React提供并推荐。但是，在当前版本(1.5.x)中，默认情况下不支持动态样式语言Less。如果我们的项目必须使用Less，我们需要手动集成它。本文主要对整合过程做一个简要的记录。

环境准备

在本节中，create-React-app用于构建一个新的React项目作为实验环境。

如果您以前从未使用过create-react-app，请通过以下命令进行全局安装(假设您已经安装了Node.js):

Npm安装-g创建-反应-应用然后，通过以下命令构建一个新项目my-app:

Npx create-react-app my-app通过cd my-app命令进入项目文件夹，执行纱线启动命令启动程序，运行成功，则实验环境准备就绪。

最终项目结构：

node _ modules 公共 src 。git ignorepackage . JSONreadme . MDyard . lock少装少装

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

因此，我们必须首先向项目中添加越来越少的加载程序(更少的编译器):

纱线少加少装可以吗？以上只是项目中安装的越来越少的loader，但是less-loader还没有通过webpack使用。

至于怎么用呢？怎么用？请参阅webpack文档，因此我们在此不再重复。

假设您已经仔细阅读了上述webpack文档，您一定知道我们应该选择在webpack.config.js文件中配置less-loader。

公开网络包配置文件

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

为了实现“零配置”，脚手架默认会将一些常用的脚本和配置集成到react-script中，这样我们就可以专注于src目录下的开发工作，不用担心环境配置。同时，集成的脚本和配置将从程序目录中消失，程序目录将变得更加干净。

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

项目建成后，将提供一个命令，纱线弹出。通过这个命令，我们可以公开由react-scripts集成的配置和脚本。

以下是关于退纱命令的支架介绍：

纱线弹出删除此工具，并将构建依赖项、配置文件和脚本复制到应用程序目录中。如果你这样做，你就不能回去！

执行此命令后，构建的依赖项、配置文件和脚本将被复制到程序目录中。这个操作是不可逆的，执行后命令会被删除，也就是说只能执行一次。

至于react-scripts中集成了哪些东西，也可以通过退纱命令的执行记录大致看出：

纱线弹出运行v 1。6 .0 $ react-脚本弹出？您确定要弹出吗？这个动作是永久性的。是弹出.将文件复制到E:\React\my-app向项目添加\配置\env.js向项目添加\ config \ paths.js向项目添加\config\polyfills.js向项目添加\config\webpack.config.dev.js向项目添加\config\webpack.config.prod.js向项目添加\ config \ webpackdevserver。配置。射流研究…向项目添加\config\jest\cssTransform.js向项目添加\ config \ jest \ fileTransform.js向项目添加向依赖项添加巴别塔装载机向依赖项添加巴别塔-预设-反应-应用向依赖项添加巴别尔-运行时向依赖项添加区分大小写的路径-网络包-插件向依赖项添加粉笔向依赖项添加css加载程序向依赖项添加dotnv向依赖项添加dotnv-展开向依赖项添加eslint向依赖项添加ESL int-配置-反应-应用向依赖项添加eslint-loader向依赖项添加eslint-plugin-flowtype向依赖项添加eslint-plugin-导入向依赖项添加eslint-plugin-jsx-a11y向依赖项添加eslint-plugin-react对象-分配给依赖项添加postss-flex bug-修复依赖项添加后置装载机到依赖项添加承诺添加英国皇家空军到依赖项添加反应-开发-应用到依赖项添加解析器到依赖项添加样式加载器到依赖项添加软件-预览-网络包-插件到依赖项添加url加载程序到依赖项添加web pack-开发-服务器到依赖项添加web pack-清单-插件到依赖项添加whatwg-fetch到依赖项更新脚本用"节点脚本/start.js "替换“反应插件”请考虑分享为什么你在这次调查中以5.37秒的成绩退出：http://goo.gl/forms/Bi6CZjk1EqsdelXk1Done。说了这么多，现在怎样才能在我们的项目中暴露工具的配置文件？没错，你没猜错，只需要运行一下纱线弹出即可。

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

webpack.config.dev.js #开发环境配置webpack.config.prod.js #生产环境配置webpackDevServer.config.js #开发服务器配置我们需要关注的是前两个，最后一个是关于本地开发服务器http://localhost:3000的一些相关配置。

修改工具配置

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

在模块。规则节点中找到钢性铸铁文件的加载规则：

1.test: /\ .css$/修改为test: /\ .(css |减)$/;2.在使用数组最后新增一个对象元素{需要装载机：解析(' less-loader ')}。

修改完成后：

//“postss”加载器将前缀应用于我们的css .//“CSS”加载器解析半铸钢钢性铸铁(Cast Semi-Steel)中的路径，并将资产作为依赖项添加//“风格”加载器将半铸钢钢性铸铁(Cast Semi-Steel)转换成注入样式标签的射流研究…模块。//在生产中，我们使用一个插件将半铸钢钢性铸铁(Cast Semi-Steel)提取到一个文件中，但是//在开发中，"样式"加载器允许对半铸钢钢性铸铁(Cast Semi-Steel)进行热编辑{ test: /\ .(css|less)$/，使用：[require。resolve(' style-loader ')，{ loader : require。resolve(' css-loader ')，选项： { importloaders : 1，}，}，{ loader :需要。解析('后CSS加载器')，选项3360 {//外部半铸钢钢性铸铁(Cast Semi-Steel)导入工作所必需的//3359 github。com/faceboncubator/create-React-app/issues/22000至此，就已经完成了创建-反应-应用对较少的的支持。

效果验证

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

首先在科学研究委员会根目录下使用较少的语法创建一个较少的文件，取名为无测试：

@ title-color : # f00；app-title { color : @ title-color }然后在App.js文件中通过如下应用程序接口导入上述的较少的文件：

"进口"。/test。“少”；再次纱线开始运行我们的程序，如果标题欢迎反应变成红色则说明配置没有问题。

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