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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。