nuxt开发中遇到的问题-主题定制
2020-06-30 本文已影响0人
JsPatric
在nuxt项目中如果使用了UI框架如antd vue、element等，主题定制配置是不可避免的问题。nuxt.config.js按照如下配置即可（以antd vue 为例）：
module.exports = {
/*** Global CSS*/
css: [ 'ant-design-vue/dist/antd.less'] ，
build: {
loaders: {
less: {
javascriptEnabled: true,
modifyVars: {
'primary-color': '#0073E6'
}
}
}
}
}
如果需要覆盖的变量比较多，我们可以抽取至单独的theme文件，此处我在根目录新建theme.js文件，内容如下：
module.exports ={
'primary-color': '#0073E6',
black: '#333',
'btn-height-lg': '50px',
'table-header-bg': '#0073E6'
}
nuxt.config.js中相应内容改为：
// 引入theme
const theme = require('./theme')
//修改modue.exports.build.loaders.less. modifyVars
modifyVars: theme
