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