React使用less语法

简介: React使用less语法

1. 安装



yarn add less less-loader or npm i less less-loader


2. 打开webpack配置文件



创建项目的时候我们是看不到webpack文件的 需要暴露出来


yarn eject or npm run eject


3. 配置less语法环境



config文件下找到webpack.config.js文件

打开webpack.config.js找到如下图:


468dbb84abbf4376bac0f289e23a845a.png


在下面添加如下两句代码:


const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;


添加完上面两句代码后收索oneOf

找到配置sass的代码片段,如图:


6d528377a371406dbcba8edc5eed90a5.png


在其下面添加如下代码:


     {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },
            // Adds support for CSS Modules, but using SASS
            // using the extension .module.scss or .module.sass
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader'
              ),
            },


4. 启动时报错



如果启动报下面错,说明你的less-loader版本过高,不兼容 getOptions 函数方法,所以需要对 less-loader 进行降级处理


4b06e92f17834e0badc55083130b6b02.png


解决方法:


通过 npm uninstall less-loader 命令卸载原版本的 less-loader,然后 通过 npm install less-loader@5.0.0 命令下载降级版本的 less-loader,这个问题就可以解决了

相关文章
|
1月前
|
存储 Dart 前端开发
为什么说 Compose 的声明式代码最简洁 ?Compose/React/Flutter/SwiftUI 语法对比
为什么说 Compose 的声明式代码最简洁 ?Compose/React/Flutter/SwiftUI 语法对比
36 1
|
2月前
|
前端开发 JavaScript 开发者
React中JSX语法入门
React中JSX语法入门
|
2月前
|
前端开发 JavaScript
【React学习】—jsx语法规则(三)
【React学习】—jsx语法规则(三)
|
5月前
|
前端开发
React 安装使用 Less(详细流程,包含 webpack、craco 方式)
React 安装使用 Less(详细流程,包含 webpack、craco 方式)
99 0
|
5月前
|
存储 前端开发 JavaScript
React | React的JSX语法(二)
React | React的JSX语法(二)
React | React的JSX语法(二)
|
5月前
|
XML 前端开发 JavaScript
React | React的JSX语法(一)
React | React的JSX语法 React | React的JSX语法(一)
|
6月前
|
前端开发 JavaScript API
【react入门手册】react 基础操作-语法、特性 、路由配置
【react入门手册】react 基础操作-语法、特性 、路由配置
|
7月前
|
前端开发 JavaScript 索引
【React】React入门(一)--React的创建、Jsx语法与组件以及状态(state)
React的创建、Jsx语法与组件以及状态(state)
79 0
|
7月前
|
XML JavaScript 前端开发
react总结之jsx是什么,jsx语法规则
react总结之jsx是什么,jsx语法规则
|
7月前
|
前端开发 JavaScript
React框架的第八课 语法基础课《第二课React框架中的事件》
React框架的第八课 语法基础课《第二课React框架中的事件》
70 0

相关产品

  • 云迁移中心