nuxt.config,js 配置 scss（less），实现全局样式，全局变量，全局混合

前言

nuxt 学习之路 - nuxt.config.js 配置篇，进行 scss 配置，实现全局样式，全局变量，全局混合（以 scss 为例， LESS 和 Stylus的配置方式相同）

---

一、配置全局 scss，每个页面都引入

要使用 scss 就要先安装 node-sass 和 sass-loader（npm install --save-dev node-sass sass-loader）。nuxt 会自动识别被导入文件的扩展名，然后 webpack 会使用相应的预处理器进行处理，所以要先安装相对应的预处理器。


在 nuxt.conf.js 进行配置：

// nuxt.conf.js
module.exports = {
  /*
   ** 配置全局 css
   */
  css: [
    '@/assets/style/main.scss'
  ]
}

// main.scss
body {
  background-color: skyblue;
}

这样，我们配置的全局样式就生效了。

二、配置全局 scss 变量 和 mixin

为页面注入 变量 和 mixin 而且不用每次都去导入他们，可以使用 @nuxtjs/style-resources 来实现。


1.安装，npm i @nuxtjs/style-resources -D


2.配置（nuxt.config.js）：

// nuxt.config.js
module.exports = {
  modules: [
    '@nuxtjs/style-resources' // 添加对应的模块
  ],
  styleResources: {
    scss: [
      './assets/style/variables.scss', // 全局 scss 变量
      './assets/style/mixins.scss' // 全局 scss 混合
    ]
  }
}

3.实现：

// mixins.scss
@mixin center() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

// variables.scss
$gray: #333;

// pages/index.vue
<style lang="scss" scoped>
.container {
  background-color: $gray;
  @include center;
}
</style>

这样就不用每次都导入，而可以直接引用了。
注意：styleResources 配置的资源路径不能使用 ~ 和 @ ，需要使用相对或绝对路径。