如何解决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
? Are you sure you want to eject? This action is permanent. Yes
Ejecting...

Copying files into E:\React\my-app
 Adding \config\env.js to the project
 Adding \config\paths.js to the project
 Adding \config\polyfills.js to the project
 Adding \config\webpack.config.dev.js to the project
 Adding \config\webpack.config.prod.js to the project
 Adding \config\webpackDevServer.config.js to the project
 Adding \config\jest\cssTransform.js to the project
 Adding \config\jest\fileTransform.js to the project
 Adding \scripts\build.js to the project
 Adding \scripts\start.js to the project
 Adding \scripts\test.js to the project

Updating the dependencies
 Removing react-scripts from dependencies
 Adding autoprefixer to dependencies
 Adding babel-core to dependencies
 Adding babel-eslint to dependencies
 Adding babel-jest to dependencies
 Adding babel-loader to dependencies
 Adding babel-preset-react-app to dependencies
 Adding babel-runtime to dependencies
 Adding case-sensitive-paths-webpack-plugin to dependencies
 Adding chalk to dependencies
 Adding css-loader to dependencies
 Adding dotenv to dependencies
 Adding dotenv-expand to dependencies
 Adding eslint to dependencies
 Adding eslint-config-react-app to dependencies
 Adding eslint-loader to dependencies
 Adding eslint-plugin-flowtype to dependencies
 Adding eslint-plugin-import to dependencies
 Adding eslint-plugin-jsx-a11y to dependencies
 Adding eslint-plugin-react to dependencies
 Adding extract-text-webpack-plugin to dependencies
 Adding file-loader to dependencies
 Adding fs-extra to dependencies
 Adding html-webpack-plugin to dependencies
 Adding jest to dependencies
 Adding object-assign to dependencies
 Adding postcss-flexbugs-fixes to dependencies
 Adding postcss-loader to dependencies
 Adding promise to dependencies
 Adding raf to dependencies
 Adding react-dev-utils to dependencies
 Adding resolve to dependencies
 Adding style-loader to dependencies
 Adding sw-precache-webpack-plugin to dependencies
 Adding url-loader to dependencies
 Adding webpack to dependencies
 Adding webpack-dev-server to dependencies
 Adding webpack-manifest-plugin to dependencies
 Adding whatwg-fetch to dependencies

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

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

(0)

相关推荐

  • vue-cli初始化项目中使用less的方法

    什么是less? Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. 引言 现在前端的vue框架越来越火,vue-cli作为vue项目的脚手架工具,是我们在开发中最最经常使用的.为了在vue项目中更好的管理我们的css文件,我们通常会引入less或者sass来帮助我们管理我们的css代码.那么,本文旨在记录如何在vue-cli初始化的项目中使用less来帮助我们更好的管理css代码. 下面话不多说了,来随着小编一起看看详

  • vue2中使用less简易教程

    首先,说明一点,如果是使用npm init webpack 项目名 的方式创建的项目,无需手动配置webpack 所以再vue中使用less就非常简单了,只需要安装less, less-loader就行了 步骤 npm install less less-loader --save //将less和less-loader安装到开发依赖 npm run dev 如果安装成功那么就可以再vue组件中使用less了 <style lang="less" scoped> .hell

  • Less 安装及基本用法

    node.js是一个前端的框架 自带一个包管理工具npm node.js 的安装 官网:http://nodejs.cn/ 在命令行检验是否安装成功 切换到项目目录,初始化了一个package.json文件 安装与卸载jQuery包(例子) 安装 卸载 安装淘宝镜像 2. 安装less 试一试: test.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

  • 详解vue项目中如何引入全局sass/less变量、function、mixin

    让我们考虑下场景:当使用rem/vw开发移动端的时候,你定义了一个px转rem的函数,或者是网站配色的全局变量等,然后到工程里为每个vue文件或者组件@import 'publicfilename.scss',那得重复做这样的工作很多很多...次,万一这些公用文件目录路径变怎么办呢,哭都来不及,想想都觉得恐怖呀! 接下来拯救我们的神器就要登场了---sass-resources-loader,它可以省去重复性的引入,还支持less,postcss等,具体用法如下: npm install -d

  • vue+iview+less 实现换肤功能

    项目搭建用的vue-cli,css框架选择的iview 1.首先安装less支持 npm install --save-dev less-loader less 然后去build文件夹下的webpack.base.conf.js文件中,添加对.less的支持 2.准备工作做好了,开始换肤 2.1新建一个文件夹styles,在里面新建一个文件theme.less 定义一个.theme()方法,写上需要的颜色参数如图: 2.2 styles文件夹下再新建一个存放各类主题的color.less文件,里

  • Vue CLI3 如何支持less的方法示例

    本文介绍了Vue CLI3 如何支持less的方法示例,分享给大家,具体如下: 安装方式: npm install less less-loader --save 或者 cnpm install less less-loader --save 大家在编写 .vue 文件的 style 的时候多会选择采用预编译样式来加速开发效率 <style lang="less"> #app { font-family: 'Avenir', Helvetica, Arial, sans-s

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

    说在前面 create-react-app是由 React 官方提供并推荐使用构建新的 React 单页面应用程序的最佳方式,不过目前版本(1.5.x)其构建的项目中默认是不支持动态样式语言Less的.如果我们的项目必须要使用 Less 呢,这就需要我们手动集成一下.本篇主要针对集成的过程做一个简要记录. 环境准备 本小节先用 create-react-app 构建一个全新的 React 项目作为实验环境. 如果您之前未曾使用过 create-react-app,请先通过如下命令全局安装(假定您

  • 解决React中的re-render问题

    目录 re-render? 错误的优化 Object.is 合理使用useEffect,解决re-render 简单实现useEffect 文章转自公众号:前端巅峰 re-render? 首先使用我的脚手架: npm i ykj-cli -g  ykj init App cd ./app yarn  yarn dev 这样一个webpack5.TS.React项目就搭建好了 我们目前只有一个APP组件,内部代码: import Myy from './myy.jpg'; function App

  • 解决React Native端口号修改的方法

    本文介绍了解决React Native端口号修改的方法,分享给大家,具体如下: 看图说话 一般情况下,如果本地安装过一些服务的话,ReactNeact 就会毫不犹豫的给你报出错误信息, 如果你是这个错误,那么你的端口号被占用了,ReactNative默认端口为8081 解决方案1: 很简单,找到使用node生成的ReactNative项目 使用node命令: 在cmd命令中,切换到项目目录下,输入: react-native start --port 9999 接下来,继续走 然后,摇晃设备或者

  • 详解vue-cli官方脚手架配置

    一,准备工作 1.下载node.js 和 npm 2.将镜像源替换为淘宝镜像 二,创建项目 1.vue环境搭建 创建目录resume 1)npm init -y 2)npm install vue-cli -g (安装vue-cli ) 3)vue init webpack --dirname(为空时默认当前目录) 输入命令后,会询问我们几个简单的选项,我们根据自己的需要进行填写就可以了. Project name :项目名称 ,如果不需要更改直接回车就可以了.注意:这里不能使用大写,所以我把名

  • 解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)

    React在安装antd之后出现的Can't resolve './locale'问题,是因为moment在2.2之后的版本都有问题,而react默认使用了最新的moment,但是在moment@2.18.1中是没有问题的. 解决方案就是配置webpack的alias,将所有的 moment 路径引用导入到 moment@2.18.1 操作步骤 安装moment 依赖 npm install moment@2.18.1 在react项目中使用yarn eject暴露config文件.如果没有安装

  • React Native 脚手架的基本使用详解

    构建项目 在相应的路径下执行命令行:react-native init 项目名 (名称不可使用连接符等特殊字符,命名可以参考APP应用名称 比如 FaceBook) react-native --v //查看版本 react-native init demo --version 0.48.0//安装指定的版本 react-native init demo --verbose --version 0.48.0 //verbose是初始化的时候显示安装详情的,安装什么模块以及进度 npm view

  • 如何解决React useEffect钩子带来的无限循环问题

    目录 什么导致的无限循环以及如何解决它们 如何解决这个问题 使用函数作为依赖项 使用数组作为依赖项 将对象作为依赖项传递 传递不正确的依赖项 结尾 React的useEffect Hook可以让用户处理应用程序的副作用.例如: 从网络获取数据:应用程序通常在第一次加载时获取并填充数据.这可以通过useEffect函数实现 操作UI:应用程序应该响应按钮点击事件(例如,打开一个菜单) 设置或结束计时器:如果某个变量达到预定义值,则内置计时器应自行停止或启动 尽管useEffect Hook在Rea

  • 解决react中useState状态异步更新的问题

    目录 疑惑 状态异步更新带来的问题 问题示例 问题解决 类组件的解决方案 函数组件的解决方案 其他解决方案 结尾 疑惑 相信刚开始使用react函数组件的小伙伴也遇到过一个坑,就是 useState 更新状态是异步更新的,但是react 并没有提供关于这个问题的解决方案.那我们能否使用自己的方法来解决这个问题呢?答案肯定是可以的. 状态异步更新带来的问题 就拿一个比较常见的场景来说.在react项目中,我们想在关闭对话框后再去处理其他业务.但是 useState 的状态是异步更新的.我们通过se

  • React官方团队完善原生Hook闭包陷阱

    目录 正文 useEvent useEvent的实现 与开源Hooks的差异 总结 正文 我们知道,Hooks使用时存在所谓的闭包陷阱,考虑如下代码: function Chat() { const [text, setText] = useState(''); const onClick = useCallback(() => { sendMessage(text); }, []); return <SendButton onClick={onClick} />; } 我们期望点击后s

  • ahooks解决React闭包问题方法示例

    引言 本文是深入浅出 ahooks 源码系列文章的第三篇,这个系列的目标主要有以下几点: 加深对 React hooks 的理解. 学习如何抽象自定义 hooks.构建属于自己的 React hooks 工具库. 培养阅读学习源码的习惯,工具库是一个对源码阅读不错的选择. 注:本系列对 ahooks 的源码解析是基于 v3.3.13.自己 folk 了一份源码,主要是对源码做了一些解读,可见 详情. 系列文章: 大家都能看得懂的源码 ahooks 整体架构篇 如何使用插件化机制优雅的封装你的请求

随机推荐