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


Posted by hoyi-23 on 2021-08-16

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

安裝

我們只需要安裝sass-loadernode-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/









Related Posts

從 Flux 與 MVC 的差異來簡介 Flux

從 Flux 與 MVC 的差異來簡介 Flux

【Day02】The Shell(中)

【Day02】The Shell(中)

Ruby語言中『符號』『字串』的不同

Ruby語言中『符號』『字串』的不同


Comments