普通文組 2.5

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 多組檔案

參考文件