AntDesignVue定制主题的坑

September 12, 2018 访问: 456 次

在定制主题的时候,参照Ant Design Vue 文档中 theme 属性的方案配置,配合使用 less-loader 的 modifyVars 的时候报错,爬了很久的坑。
webpack.base.conf.jsrules中添加

{
    test: /\.less$/,
    loader: 'less-loader',
    options: {
        javascriptEnabled: true
    }
}

报错


Module build failed: 

// load the styles
var content = require("!!../../../../css-loader/index.js??ref--8-1!../../../../postcss-loader/lib/index.js??ref--8-2!../../../../less-loader/dist/cjs.js??ref--8-3!./index.less");
          ^
Unrecognised input
...

解决方案

新版的 webpack 在 build/utils.js已经对less-loader默认做了配置,只需要在 utils.js 中进行配置即可。
找到 less: generateLoaders('less')一行,修改为:

less: generateLoaders('less', {javascriptEnabled: true, modifyVars: packageConfig.theme}),

即可完成定制主题的需求。


添加新评论