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項目！！！

 1 // vue.config.js
 2 module.exports = {
 3   css: {
 4     loaderOptions: {
 5       // 給 sass-loader 傳遞選項
 6       sass: {
 7         // @/ 是 src/ 的別名
 8         // 因此這裏假設你有 `src/variables.scss` 這個文件
 9         data: `@import "~@/variables.scss";`
10       }
11     }
12   }
13 }

 

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

 1 // nuxt.config.js
 2 export default {
 3   ...
 4   /*
 5   ** Build configuration
 6   */
 7   build: {
 8     ...
 9     // https://zh.nuxtjs.org/api/configuration-build/#loaders
10     loaders: {
11       scss: {
12         // scss公用文件
13         // 路徑前面的assets是nuxt.js內置別名
14         data: `
15           @import "assets/sass/_fn.scss";
16           @import "assets/sass/_mixins.scss";
17           @import "assets/sass/_var.scss";
18         `,
19       },
20     },
21     ...
22   },
23   ...
24 }

注意上面配置的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配置！

內容完！

 

isDev