nuxt项目中使用less全局样式、全局变量的配置

使用less全局变量的配置

1. 配置全局less

使用less先安装less less-loader,nuxt会自动识别导入的后缀名，在nuxt.config.js中配置

css: [
    /**
     * 配置全局 css
     */
    'element-ui/lib/theme-chalk/index.css',
    '@assets/styles/global.less',
  ],

2. 配置全局 scss 变量

为页面注入变量可以使用@nuxtjs/style-resources 来实现
安装yarn add @nuxtjs/style-resources -D
配置nuxt.config.js

modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/style-resources'
  ],
	
styleResources:{
    less:[
      './assets/styles/variable.less'
    ]
  },

styleResources 配置的资源路径不能使用 ~ 和 @,要使用绝对或者相对路径