Vue3 安裝 SCSS 編譯器!然後跑不起來怎麼辦?

透過 Vue cli 建立專案後，它的預設會安裝好webpack的打包工具，但是要完成SCSS編譯，我們還需要在載入SCSS編譯器。

安裝

我們只需要安裝sass-loader和node-sass
npm install -D sass-loader node-sass

運用

1. 寫在component的style內

將lang設為scss。

2. 將SCSS檔移出來寫

1. 將它放在路徑:src/assets/scss內
   
2. 引入到頁面中: 方法一，在App.vue中引入

   <style lang="scss" scoped>
    @import './assets/scss/main.scss';
   </style>
   

   or

   <style lang="scss" scoped src="./assets/scss/main.scss"></style>
   

3. 引入到頁面中: 方法二，在main.js引入

   import '@/assets/scss/main.scss';
   

都載好了但是專案出錯怎麼辦!!

只能說電腦程式一切一切都太神奇了!我真的覺得自己就是一個超級超級小的存在，學了一陣子大概也只了解了一百兆分之一吧!
這個方法是我網路上找到的解答:

npm uninstall node-sass
npm install sass-loader
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/