antd 自定义主题发现编译时会报错

最新推荐文章于 2023-08-09 15:09:21 发布
最新推荐文章于 2023-08-09 15:09:21 发布
阅读量342 收藏
点赞数 2
分类专栏： React 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TO_Web/article/details/117740578
版权

在使用 antd 自定义主题时如果直接 yarn 按照命令按照你会发现编译时会报错，
this.getOptions is not a function; Inline JavaScript is not enabled. Is it set in your options?
这两个错误的原因是因为less、less-loader版本不同导致的
试试卸载当前版本,下载如下版本
yarn remove less
yarn remove less-loader
yarn add less@3.12.2
yarn add less-loader@7.1.0

TO_WebNow
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
antd 自定义主题功能使用报错 .bezierEasingMixin(); ^ Inline JavaScript is not enabled. Is it set in your options
m0_37148591的博客
07-04 4244
前言 日常积累，欢迎指正 环境描述 { "devDependencies": { "less": "^3.9.0", "less-loader": "^5.0.0", "ts-loader": "^6.0.3", "webpack": "^4.34.0", "webpack-cli": "^3.3.4", "webpack-dev-server"...
使用babel-plugin-import使antd插件按需加载并自定义主题,在webpack.config.js文件下的相关配置
我的个人博客
12-09 1793
使用babel-plugin-import使antd插件按需加载并自定义主题,在webpack.config.js文件下的相关配置,这里演示的是webpack4.0 因为antd使用的是less,所以这里需要安装less 安装antd: yarn add antd 安装babel-plugin-import: yarn addbabel-plugin-import 按需加...
关于react使用antd定制主题报错
Benz_s600的博客
04-28 697
1.报错this.getOptions is not a function 解决办法:可能是由于less-loader的版本过高 可以将当前版本卸载,再安装7.x的版本 npm uninstall less-loader npm install less-loader@7.1.0 2.报错options has an unknown property ‘modifyVars’. These properties are valid 解决办法:modifyVars 语法问题 修改根目录下的config
处理antd按需加载样式编译问题
weixin_44297222的博客
04-18 236
下载包 yarn add antd yarn add react-app-rewired customize-cra babel-plugin-import yarn add less less-loader 在主目录下定义加载配置的 js 模块: config-overrides.js //配置具体的修改规则 const { override, fixBabelImports,addLessLoader} = require('customize-cra'); module.exports = ove
解决问题：this.getOptions is not a function
JJJ
08-15 287
this.getOptions is not a function vue程序执行npm run dev的时候报的错误。 1 原因 node-ass和ass-loader的版本太高，无法兼容。 2 解决方法 打开项目中package.json文件，把node-ass的版本和ass-loader版本调低 ==本人在node-sass4.14.1版本，sass-loader7.3.1版本下可以运行。 3 更改完版本要在控制台npm install重新安装 4 npm run dev运行 ...
npm install:Could not resolve dependency：peer... 原因和解决方案
最新发布
时清云的博客
08-09 6768
安装时忽略所有peerDependencies，忽视依赖冲突，已有的依赖不会覆盖。: 会无视冲突，并强制获取远端npm库资源，即使本地有资源也会覆盖掉。比较保险一点，反正我用了就安装成功了。那么npm：何时使用。即可，其余同样如此。
antd+react项目迁移vite的解决方案
福禄网络研发团队的博客
04-19 3086
antd+react+webpack往往是以react技术栈为主的前端项目的标准组合，三者都有成熟的生态和稳定的表现，但随着前端圈的技术不断革新，号称下一代构建平台vite2的发布，webpack似乎不那么香了，为什么这么说呢，因为vite太快了。经过一段时间的尝试，决定在项目中把webpack替换成vite试试，遂写成本文分享给大家。 Vite是什么 作为本文的主角，首先简单介绍一下vite这...
ant-design-vue+vite主题切换详细步骤（简单案例）
embelfe_segge的博客
02-22 2472
现在越来越多的网站支持主题切换，我们的也要！ 在这，我们要实现两个例子，主题切换与夜间模式！ 主题切换： 夜间模式： 1、准备工作，初始化一个简单的vite项目 安装 ant-design-vue和less yarn add ant-design-vue@next yarn add less --save 因为ant-design-vue是使用less开发的，所以既然用了它，咱最好还是用和它一致的less。 在main.ts中全局引入antd组件与样式 import { createApp }.
vue-cli脚手架项目构建以及按需引入antd
weixin_47783830的博客
10-25 1325
安装vue-cli npm install vue/cli -g 查看vue版本 注意：V要大写 vue -V 如果下载速度太慢，可以使用cnpm淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 此时下载出来的应该是2.9.6版本的脚手架 vue项目创建分为两种 vue-cli2 vue init webpack name vue-cli3 vue create name 一.CLI.
记录 React 17 系统精讲 结合TS打造旅游电商平台
qq_41719561的博客
06-12 673
本人小白跟着敲，略有改动，更新中..代码：GitHub - Frankozay/react_travel: 来自课程 React 17 系统精讲 结合TS打造旅游电商平台欢迎大家找我互相交流！学习！
antd-theme-generator:该脚本将生成color.less文件，以更新浏览器中与颜色相关CSS
05-02
蚂蚁主题生成器 该脚本生成特定于颜色的样式/较少的文件，可用于在浏览器中动态更改主题 例子： const { generateTheme } = require('antd-theme-generator'); const options = { antDir: path.join(__dirname, './node_modules/antd'), stylesDir: path.join(__dirname, './src'), // all files with .less extension will be processed varFile: path.join(__dirname, './src/styles/variables.less'), // default path is Ant Design default.less file themeVaria
antd的typegraphy组件实现文本展开，收起功能
总结，交流，记录，成长
05-15 1253
业务需要实现一个文章列表，在超过3行的文字默认收起，点击展开可查看更多。
Ant design vue动态主题切换的坑与一般性方法
03-04 4267
本文原创，并且以吐槽为主，下面开始： Ant design vue是很优秀的框架，不过对于一般小白用户（比如我），文档方面不够友好。官方给出了主题自定义色彩的方案，但是太过于简陋，网上很多技术解决方案也点到即止，我在这方面足足浪费了两天时间，下面说一下技术重点，每个点都是自己踩出来的坑，都是泪： 先说下需要的各个模块以及版本号，这个很重要，版本号不对，就会有各种你搜都搜不出解决方案的报错 【以下内容均针对vuecli3/4初始化的项目环境，其他方案请自行解决】 Vue@2.6.11 Ant-de.
ant design vue 在线自定义更换主题颜色
qq_34164252的博客
12-20 6375
先看demo 源码 原文地址 看到ant design pro 上的 主题颜色更换 感觉挺酷的 就研究了一下 ， 因为最近想用vue 重写一版博客 所有就 用的 vue + ant design 做的这个demo 1 创建项目 用vue cli 创建项目之后 需要先安装以下两个 插件 第一个是 ui 都知道 第二个是 用来改变颜色的插件 “ant-design-vue”: “^1.4.8”, “a...
Ant desgin vue 动态切换主题色
qq_32944491的博客
12-20 1715
需求：是动态切换主题色； 思路一：配置不同的less文件，然后逻辑判断进行引用文件； 思路二：参考Aant Pro项目引用webpack-theme-color-replacer插件来实现； 思路三：window.less.modifyVars和antd-theme-generator来动态更新主题色； ...
npm 报错
Mia的博客
05-14 1908
npm ERR! code ETIMEDOUT npm ERR! syscall connect npm ERR! errno ETIMEDOUT npm ERR! network request to http://192.168.0.105:8081/repository/npm-group/antd-theme-generator/-/antd-theme-generator-1.2.11.tgz failed, reason: connect ETIMEDOUT 192.168.0.105:808.
使用antd-theme-webpack-plugin报错Error LessError: Cannot find module ‘antd/lib/style/themes/default.less
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
09-28 3833
文件的 362 行使用了。所以问题就定位到了这个文件，而这个文件所在的包是。的代码，当做我们的自定义插件，然后自己主动安装。，需要我们独自分离这两个包，因为我们安装的是。配置里的引用自己定义的插件，其他不需要改动。注释掉了，所以断定是这个依赖的版本有问题。文件，我们可以去全局搜索哪里使用了。插件：里面的代码直接复制。启动服务就报错了：错误如下。我的做法是自己复制一份。启动服务，就没有报错了。
antd编译报错：Type error: ‘?‘ expected. TS1005
weixin_40897480的博客
12-14 2462
很可能是typescript版本太低，使用tsc -v查看版本，可以安装新版本，参考 https://stackoverflow.com/questions/46398916/typescript-error-ts1005-expected-ii 如果本机安装的版本不低，查看package.json里面的配置
ant-design主题定制 antd-theme-generator 源码解读
chashao__的博客
04-09 5089
antd-theme-generator 源码解读 antd-theme-generator只是针对于颜色的定制，对于其他属性例如字体大小，边框，边距等样式不提供定制 这里只针对generateTheme方法和其涉及到的方法进行讲解，其他的方法不予以讲解。官方文档有使用这个方法的例子，请参考：https://github.com/mzohaibqc/antd-theme-generator 参数 ...
antd 自定义主题
05-31
Ant Design提供了一个可扩展的主题定制解决方案，使您可以通过更改变量的值来自定义Ant Design的主题。以下是如何自定义Ant Design主题的步骤： 1. 首先，您需要在项目中安装 `less-loader` 和 `less` 两个依赖： ``` npm install less-loader less --save-dev ``` 2. 在src目录下创建一个名为 `theme.less` 的文件，并在其中添加您希望更改的变量。例如，您可以更改主色调为蓝色： ``` @primary-color: #1890ff; ``` 3. 在 `webpack.config.js` 中添加以下代码来配置 `less-loader` ： ``` // webpack.config.js module.exports = { // ... module: { rules: [ // ... { test: /\.less$/, use: [ { loader: 'less-loader', options: { lessOptions: { modifyVars: { 'primary-color': '#1890ff', }, javascriptEnabled: true, }, }, }, ], }, ], }, }; ``` 这里使用 `modifyVars` 来覆盖 `theme.less` 中的变量。 4. 导入您需要的Ant Design组件，并将其包装在 `<ConfigProvider>` 组件中。添加 `theme` 属性，并将其设置为您的 `theme.less` 文件的相对路径： ``` import { ConfigProvider, Button } from 'antd'; import './theme.less'; const App = () => ( <ConfigProvider theme="./theme.less"> <Button type="primary">Custom Theme</Button> </ConfigProvider> ); ``` 在这里，我们将 `theme` 属性设置为 `./theme.less` ，这是 `theme.less` 文件的相对路径。 现在，您的Ant Design主题已成功自定义！您可以根据需要更改 `theme.less` 文件中的变量来更改主题。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值