30天挑戰：「Vue project與SCSS」相關筆記

總結

關於如何在 Vue Project 中使用 SCSS 的相關筆記

版本與環境

@vue/cli: 4.5.13

筆記

• Vue CLI 4 預設搭配 webpack 4，sass-loader需指定能配合的版本才能正常運行 npm install -D sass-loader@^10 sass

• 安裝sass-loader後，即可在 vue components 或 views 中使用 scss 語法

  <style lang="scss">
    $bg-classroom: #232323;
  
    #app {
      width: 100vw;
      height: 100vh;
      background-color: $bg-classroom;
    }
  </style>

• 如果需要在專案中使用_reset.scss、_color.scss或是_mixin.scss等通用模組的話，則在 Vue 專案根目錄建立vue.config.js並輸入以下內容

  // vue.config.js
  module.exports = {
    css: {
      loaderOptions: {
        scss: {
          additionalData: `
            @import "@/styles/_module1.scss";
            @import "@/styles/_module2.scss";
          `
        }
      }
    }
  }

• 使用反引號即可 import 多組檔案

參考文件

• Vue CLI: Working with CSS