背景:React使用create-react-app脚手架创建,然后yarn run eject暴露了配置之后修改less配置,

需求:实现antd组件按需加载与修改主题。

一开始是按照webpack.config.dev.js文件中的配置进行less的配置。

可以看到脚手架创建的config文件为加载loader写了一个公共方法,不是以前的webpack配置,所以仿照他的方式进行配置less文件。

直接复制css的配置,修改成less的配置,然后yarn start重启项目。

此时可以加载less文件。

下面进行antd的按需加载与主题设置。

下载babel-plugin-import插件,然后在plugins中添加配置

[
'import', {
"libraryName": 'antd',
"style": true
}
],

发现报错

Failed to compile.

./node_modules/antd/lib/style/index.less (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js!./node_modules/antd/lib/style/index.less)

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?

查看issue后加了一下代码在lessloader里面,仍然报错

options: {
javascriptEnabled: true,
modifyVars: {
'primary-color': 'red',
},
},

其中“primary-color”是测试antd的自定义主题的。

因为对自动生成的config文件不熟悉,决定改用原来的less配置来对less文件进行加载。

yarn start重启项目之后,可以实现按需加载与定制主题。

{
test: /\.less$/,
//include: paths.appSrc,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader",// compiles Less to CSS
options: {
sourceMap: true,
modifyVars: {
'primary-color': '#1DA57A',
'link-color': '#1DA57A',
'border-radius-base': '2px',
},
javascriptEnabled: true,
}
}]
},

主要原因还是对于webpack的配置不熟悉,得找时间好好研究一下!

如果没有暴露配置,可以参考antd官方的配置进行按需加载与定制主题。详见:在 create-react-app 中使用

React引入AntD按需加载报错的更多相关文章

  1. react 使用antd 按需加载

    使用 react-app-rewired 1. 安装react-app-rewired: 由于新的 react-app-rewired@2.x 版本的关系,你还需要安装 customize-cra. ...

  2. react-antd 按需加载报错

    基于create-react-app 搭建的 react 项目 引入  antd UI  配置按需加载 但是报一下错误 .翻译过了一下 是内嵌JavaScript选项没有开启什么的 大白话就是 les ...

  3. react CRA antd 按需加载配置 lessloader

    webpack配置 webpack.config.dev.js, webpack.config.prod同理. 'use strict'; const autoprefixer = require(' ...

  4. 在create-react-app使用less与antd按需加载

    使用antd按需加载 使用react-app-rewired对 create-react-app 的默认配置进行自定义 yarn add react-app-rewired --dev /* pack ...

  5. Centos系统创建用户oracle后,用该用户登陆系统,页面加载报错GConf error

    Linux 的 GConf error 解决办法 问题: Centos系统创建用户oracle后,用该用户登陆系统,页面加载报错,导致重新进入Centos系统后出现: GConf error:Fail ...

  6. react中使用antd按需加载(第一部)

    什么是react按需加载?简单来说就是当我们引用antd的时候需要引入全局css样式,这会对性能造成一定的影响,那么使用按需加载以后就不需要引入css全局样式了,直接引入功能模块即可,既然需要设置按需 ...

  7. 【react学习二】create-react-app 接入antd 并按需加载组件

    1.安装 cnpm i babel-plugin-import --save-dev 2.使用 在根目录下的package.json下的bable中添加相应代码 "babel": ...

  8. antd按需加载,配置babel-plugin-import插件,编译后报错.bezierEasingMixin()解决方案

    报错如下: ./node_modules/antd/lib/button/style/index.less (./node_modules/css-loader??ref--6-oneOf-7-1!. ...

  9. react 实现路由按需加载

    import() 方法: async.js 文件内容: import React from 'react'; // import "babel-polyfill"; //compo ...

随机推荐

  1. 个人永久性免费-Excel催化剂插件功能修复与更新汇总篇之九

    第11波-快速批量插入图片并保护纵横比不变 原文链接:https://www.jianshu.com/p/9a3d9aa7ba7e 修复了插入图片有纵向的图片时,插入后还是显示横向的情况. 第83波- ...

  2. apache添加https证书

    今天折腾了一下,总结apache添加https证书的方法. 证书类型分为两种, A)自签名证书 利用oepnssl命令生成.csr和key文件,没有授信,没有有效期,但是可以强制使用https协议,可 ...

  3. Uncaught ReferenceError: xxx is not defined 解决办法

    VM11371:1 Uncaught ReferenceError: inputSize is not defined    at <anonymous>:1:1 解决办法(根据需求调整) ...

  4. C#中判断socket是否已断开的方法

    记得以前Delphi/BCB里的socket编程,要判断[连接的另一方]是否断开了,只要在ondisconnect事件里处理就行了!如今在C#中,这个问题的确还是个问题哦!        首先,Soc ...

  5. Java emoji持久化mysql

    好久没有更新博客了,今天和大家分享一个关于emoji表情持久化问题,相信做web开发的都遇到过这样的问题,因为我们知道mysql的utf-8字符集保存不了保存不了表情字符,这是为什么呢?因为普通的字符 ...

  6. 如何使用JSP访问MySQL数据库

    <%@page import="java.sql.*" import ="java.util.*" import ="java.io.*&quo ...

  7. mysql中的SQL语句执行的顺序

    1. from2. on3. join4. where5. group by6. with7. having8. select9. distinct10. order by11. limit 例: s ...

  8. 关于object对象转换为int类型

    注意:不能强制转换!!! Object a; int b = Integer.parseInt(String.valueOf(a));

  9. Web前端三大框架_angular.js 6.0(二)

    Web前端三大框架_angular.js 6.0(一) 需要视频教程,看头像昵称处 一.Angular 6.0  1.1样式 html中引入样式:内嵌式,外链式,行内式. ng6中组件引入样式的方式也 ...

  10. 转载 vue-awesome-swiper - 基于vue实现h5滑动翻页效果

    说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! 中国有句古话叫:天塌下来有个高的顶着. 在前端圈里,总有前仆后继的仁人志士相继挥洒着热汗(这里 ...