nuxt开发中遇到的问题-主题定制

在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