Nuxt.js中scss公用文件(不使用官方插件style-resources)

項目多多少少應該都遇到有公用文件這種情況，比如說偶爾某一天產品來找你，能不能明天把網站的這個顏色給我改下？第二天再來給我換回來？

如果再css2.x時代，不使用css預處理技術，這一改只能“查找替換”了，使用預處理不使用變量也只有“查找替換”了。

當然，css3的時代就另當別論了，因為css3本身已經開始支持變量(參考文檔MDN)！

 

話不多說，首先可以去看看nuxt官網的公用文件使用方式，鏈接！

畢竟還要裝個第三方包文件style-resources，老實說每多裝一個插件項目被黑的風險就大一分，畢竟有event-stream包被植入惡意代碼的前車之鑒！！

 

下面說說如何不使用這個插件，直接使用node-sass的data屬性實現公用文件。

先看看vue cli3官網給的sass公用文件實現方式，鏈接！此方法只適用於vue cli項目，不適用nuxt項目！！！

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // 給 sass-loader 傳遞選項
      sass: {
        // @/ 是 src/ 的別名
        // 所以這里假設你有 `src/variables.scss` 這個文件，最新的 sass-loader 參數 data 改為了 prependData
        data: `@import "~@/variables.scss";`
      }
    }
  }
}

 

nuxt畢竟不是使用的vue cli，所以這個方式只能給我們參考，nuxt具體實現如下:

// nuxt.config.js
export default {
  ...
  /*
  ** Build configuration
  */
  build: {
    ...
    // https://zh.nuxtjs.org/api/configuration-build/#loaders
    loaders: {
      scss: {
        // scss公用文件
        // 路徑前面的assets是nuxt.js內置別名，最新的 sass-loader 參數 data 改為了 prependData
        data: `
          @import "assets/sass/_fn.scss";
          @import "assets/sass/_mixins.scss";
          @import "assets/sass/_var.scss";
        `,
      },
    },
    ...
  },
  ...
}

注意上面配置的loaders下的scss，不是vue cli3的sass！！以上是假設你的assets/sass目錄中存在_var.scss，_mixins.scss，_fn.scss三個文件，當然你可以寫N個都行。

其中路徑前面的assets是nuxt內置別名，官網文檔只說了~和@是內置的根目錄，並沒有介紹assets這個別名，其實內置目錄有如此之多：

當然是用的nuxt版本不一樣，可能內置別名也不一樣，查看項目路徑別名和新增項目路徑別名方法如下：

// nuxt.config.js
export default {
  ...
  /*
  ** Build configuration
  */
  build: {
    ...
    // https://zh.nuxtjs.org/api/configuration-build/#loaders
    extend (config, ctx) {
      if (ctx.isDev) {
        // 查看別名配置信息
        console.log(config.resolve.alias);
        // 添加 alias 配置
        // !這兒添加的別名不能在nuxt.config.js文件中使用
        Object.assign(config.resolve.alias, {
          'sass': path.resolve(__dirname, 'assets/sass'),
        });
      }
    },
    ...
  },
  ...
}

 

本文章中使用的nuxtjs版本為"nuxt": "^2.8.1"。

以上就是nuxt配置公用scss文件的使用方式了，本人習慣使用scss，所以沒去搗鼓sass文件公用方式，方法跟上面差不多，具體查看node-sass配置！

內容完！