全局less/sass变量在每个组件中都可用方案

vue-cli创建的项目下解决方案

使用 sass-resources-loader

sass-resources-loader

Nuxt 下的解决方案(官方提供的包)

资源包链接 => @nuxtjs/style-resources

这个包支持加载 sass/less/Stylus

以下是 less示例:

  • 1 在 /assets目录下新建 variable.less

写入你的less全局变量

@primaryColor: #76b95a;
  • 2 项目根目录下安装 @nuxtjs/style-resources
yarn add @nuxtjs/style-resources -D
  • 3 修改 nuxt.config.js

在 buildModules属性下引入上一步下载的包

export default {
  css: ['~assets/global.less'],
  //以下是新加的
  buildModules: ['@nuxtjs/style-resources'],
  styleResources: {
    less: "./assets/variable.less"
  }
}

推荐阅读更多精彩内容