说在前面

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变成红色则说明配置没有问题。

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

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

标签:
React,官方脚手架,Less支持

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com