項目中使用的 scss 編譯過慢，經(jīng)常在編譯中途停止不動，懷疑是 sass-loader 版本問題，決定升級。

原版本：

node: 14.16.1
node-sass: ^7.0.1
sass-loader: ^7.3.1
vue.config.js 中 全局 scss 變量配置

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        // 全局sass變量 
        //sass-loader 8.0.0以前版本 , v8 - prependData, v10+ - additionalData 
        data: `@import "~@/assets/scss/index.scss";`
      },
      sass: {
        // 全局sass變量 
        //sass-loader 8.0.0以前版本 , v8 - prependData, v10+ - additionalData 
        data: `@import "~@/assets/scss/index.scss";`
      }
    },
  },
}

現(xiàn)在一看就不對勁，node-sass 和 sass-loader 版本號，不完全對應(yīng)，根據(jù)實際體驗是可以用，但是用的不得勁。

升級后

node: 16.15.1，對應(yīng) npm版本：8.11.0，node_modules 版本：93
node-sass: ^6.0.1
sass-loader: ^10.0.1
vue.config.js 中 全局 scss 變量配置

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "~@/assets/scss/index.scss";`
      },
      sass: {
        additionalData: `@import "~@/assets/scss/index.scss";`
      }
    },
  },
}

經(jīng)官方尋找的版本號，node-sass 上有 node和 node-sass 對應(yīng)版本號。
官方推薦 node 版本：node 官方下載地址
下載特定 node 版本：查看 node 與 npm、node_modules 對應(yīng)版本號并下載

image.png

綜上，得出升級后對應(yīng)的版本號。

TIPS：

1. 升級過程中，當(dāng)前最新 Node 是 v18+，想著升都升了，不如再升高級點，到 v17+，升級上去遇到報錯 Error: error:0308010C:digital envelope routines::unsupported。
   原因： node v17 中的 OpenSSL3.0 對允許算法和密鑰大小增加了嚴(yán)格的限制，可能會對生態(tài)系統(tǒng)造成一些影響。在 node v17 以前一些可以正常運行的的應(yīng)用程序,但是在 V17 版本可能會拋出以上異常。
   解決方法：
   windows 運行： set NODE_OPTIONS=--openssl-legacy-provider
   mac or linux 運行： export NODE_OPTIONS=--openssl-legacy-provider
   當(dāng)然，我當(dāng)時由于第 2 點的報錯未解決，又裝回了 v16+。

2. 升級后啟動項目報錯：ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
   一開始查找到的都是 node-sass 和 sass-loader 的版本號不對應(yīng)，但是此處版本都是經(jīng)過我精挑細(xì)選，從眾多版本號中脫穎而出，獨一無二的呢。
   必然不可能不對應(yīng)（雖然比對、卸載重裝了好多次，還把 package-lock.json 刪掉，重新生成[npm insatall 可重新生成 package-lock.json]）。
   最后發(fā)現(xiàn)原因是，上面的全局 scss 變量配置沒有修改，sass-loader 已經(jīng) v10+，配置中還是使用的 v8- 的關(guān)鍵字。老字怎么配得上我新版本，不報錯簡直是天理不容?。?！
   綜上，此錯的原因可能有兩個，node-sass , sass-loader 版本不對應(yīng)；或 vue.config.js 中全局 scss 變量配置關(guān)鍵字有誤。

3. npm i 的時候，如果 sass-loader 使用 v10.0.1，node-sass 使用 v6.0.1，即 版本號寫死或版本號前為 ~ ，只升級最小的版本號，安裝過程中會提示 當(dāng)前 sass-loader 對應(yīng)的 node-sass 為 v4+ 或 v5+。版本號前改為 ^ 解決，每次升級大版本號后面的。安裝好后，查看 package-lock.json，最終安裝的 node-sass 為 v6.0.1 ，sass-loader 為 v10.2.1。

解決報錯后，啟動項目，完美執(zhí)行，除了編譯過程中，進(jìn)度 67% 68% 處，兩個數(shù)字反復(fù)橫跳多次（不知原因），沒有其他問題。也不卡著不動了，治好了我多年的心焦癥。

另：項目中 element-ui 樣式剛開始引入的 scss 文件 （@import '~element-ui/packages/theme-chalk/src/index'），編譯過程中提示 sass 2.0 中，某些用法會被棄用，檢查出超多警告，之前在 element-ui 下執(zhí)行 sass-migrator division */*.scss ，不會打印警告了。但感覺也會去檢查，只是檢查過程不打印出來而已， 甚至可能是編譯中間卡住的罪魁禍?zhǔn)住?br> 趁此次升級，改為引入 css 文件（@import '~element-ui/packages/theme-chalk/lib/index.css'），一舉解決。packages 下的文件為插件源代碼，lib 為編譯后輸出的代碼，使用 lib 方便些

完美 ending

[20220911 更新]：

• 上面 vue.config.js 中配置的全局引入 scss，會在每個使用 scss 的 vue 組件中引入。因此，此處適合配置全局變量和 mixin 之類，單純的全局樣式，不建議在此處引入。如果執(zhí)意在此處引入全局樣式，有的 vue 文件中沒有 style 樣式標(biāo)簽，想要全局樣式在此處生效，需要 vue 文件中寫一個<style lang="scss">中間必須有內(nèi)容 </style>（猜測因為配置文件是在每個 vue 文件單獨引入的原因）。
• 全局樣式 scss，在 vue-cli4 + webpack 4.x 項目的 main.js 中，引入不報錯，但也不生效（暫時沒找到原因）。在 vue-cli5 + webpack5.x 項目的 main.js 中，引入生效。保險起見，在 app.vue 中全局引入最好。
  -引入 scss 文件時，使用 @import url('xxx.scss')語法，會被解析為 css 文件，里面的變量不會生效。應(yīng)使用 @import 'xxx.scss'