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 配置的資源路徑不能使用 ~ 和 @,要使用絕對或者相對路徑