【vue】vue-cli3如何使用scss

vue3如何使用scss

2022/4/3

網上有一大堆教程，但是怎么安怎么報錯… 版本問題真的很難解決。今天終於成功了，記錄一下安裝方法：

1. 全局通過cmd執行vue add style-resources-loader

   

    

   安裝完成以后項目根目錄下應該已經建立好vue.config.js了，並且根據安裝時的選擇已經添加好了sass/scss配置

2. 在當前項目中安裝依賴：

   npm i node-sass@7.0.1 --save-dev
   npm i sass@1.49.9 --save -dev
   npm i sass-loader@10.1.0 --save-dev

   我安裝的是上面的三個版本。特別注意，安裝的過程中可能會報錯：

   

    

    這種報錯都是因為版本出現問題了，npm安裝的過程中出現了沖突從而報錯崩潰。可以通過攜帶參數的方法解決：

   • --force：強制以最后下載的依賴項覆蓋任何以前下載的（沖突的）依賴項

   • --legacy-peer-deps：忽略項目中引入的各個modules之間的相同modules但不同版本的問題並繼續安裝，保證各個引入的依賴之間對自身所使用的不同版本modules共存

   一般情況下，使用--legacy-peer-deps會更加穩妥。如果安裝時報錯，則帶上這個參數就可以了

3. 重啟vue-cli項目，大功告成！

   

參考博文：

• https://juejin.cn/post/6971268824288985118

• https://blog.csdn.net/weixin_46972614/article/details/123395510