modifyVars: { hack: `true; @import "${resolve('./src/assets/style/global.less')}";`, '@msFontSize': '12px' } }, }, in vite.config.js, it's woks. but when i try to use less.modifyVars, it's not woks import less from 'less' const handleChangeTheme = () => { less.modi...
modifyVars: { hack:'true; @import "@/assets/less.less"' }, javascriptEnabled:true } } } @众所周知对应src目录,只需要对应修改这个全局less的目录即可。 对应下面的代码修改即可,加上css那部分就行了。 Copy import{ fileURLToPath,URL}from'node:url' import{ defineConfig }from'vite' importvuefrom...
直接在 vite.config.ts 写入以下代码就可以了 importpath from'path'css:{preprocessorOptions:{less:{modifyVars:{hack:`true;@import(reference)"${path.resolve('src/assets/styles/color.less')}";`,},javascriptEnabled:true}}}, 如果path报错 改为 import{resolve}from'path'css:{preprocessorOptions:{less...
index.less @primary-color: #1890ff; main.ts import './style/index.less' 需要在vite.config.ts中配置css,便可以在组件中使用index.less中定义的变量了 export default { css: { preprocessorOptions: { less: { modifyVars: { hack: `true; @import (reference) "${resolve('src/style/global/config....
modifyVars: { '@primary-color': '#f99b0b', ...config.theme, // 自定义 ant 前缀 '@ant-prefix': config.antPrefix || 'ant', }, plugins: [new LessPluginImportNodeModules()], javascriptEnabled: true, }, }, }, }; }, }; } 复制代码 迁移的整个过程没有想象中那么繁杂,反而相对容易。
theme - 配置 less 变量(对应 css.preprocessorOptions.less.modifyVars 配置) lessLoader - 设置 less-loader 配置项(与 theme 配置相同) ignoreMomentLocale - 忽略 moment 的 locale 文件(可以通过 alias 设置别名方式解决) proxy - 配置代理能力(对应 server.proxy) ...
import '@/assets/style/variables.less' 4.配置vite.config.js css: { preprocessorOptions: { less: { javascriptEnabled: true, modifyVars: { hack: `true; @import (reference) "${resolve('src/assets/style/variables.less')}";` } } } } 5.页面上使用 默认主题 红色主题 const changeTheme =...
less: { // 支持内联 JavaScript javascriptEnabled: true, modifyVars: { "primary-color": "#A0006B", "link-color": "#116EBE", }, }, }, }, resolve: { alias: { ...paths, conf: resolve(__dirname, "conf/dev"), }, }, server: { ...
2. 无法识别 less 全局变量 image.png 解决办法: 把自定义的全局变量从外部注入即可, 直接在vite.config.js的 css 选项中加入: 代码语言:javascript 复制 css:{preprocessorOptions:{less:{modifyVars:{hack:`true;@import '${resolve('./src/vars.less')}';`,...themeVariables,},javascriptEnabled:true,}...
1.安装less npm i less less-loader -s 2.安装sass npm i sass node-sass sass-loader -s 3.配置全局样式变量 exportdefaultdefineConfig({plugins:[],resolve:{},css:{preprocessorOptions:{scss:{additionalData:`@import"./src/assets/css/globalStyle.scss";`},less:{modifyVars:{hack:`true;@import"....