配置
less的配置,用的是antd4版本less版本为10 所以配置webpack.config.js:
{
test: /\.(css|less)$/,
use: [
{ loader: "style-loader"},
{ loader: "css-loader"},
{
loader: "less-loader",
options: {
lessOptions: {
javascriptEnabled: true,
modifyVars: themeAntd
},
},
},
],
},
这里面modifyVars是默认的自定义配置themeAntd
引入
theme-color.less定义的是要自定义改变的样式和变量,后期通过改变变量的值改变这里面的样式。后面要更改主题的组件的样式都要在这里面重写和定义。
<link rel="stylesheet/less" type="text/css" href="%PUBLIC_URL%/static/css/theme-color.less" />
<script type="text/javascript" src="%PUBLIC_URL%/static/js/less.min.js"></script>
使用
window.less.modifyVars({'@text-color': 'red' });
window.less.refreshStyles();
你可能触发事件之后依然无法改变,这是因为如果要改变变量值,首先要在theme-color.less定义这个变量,并使用它,才会发生变化。不然看不到任何变化。
报错
Inline JavaScript is not enabled. Is it set in your options
这种报错是因为配置的时候没有加javascriptEnabled: true。
|