VueCli3 使用 NutUI （按需加載、定制化主題）

創建vue.config.js

module.exports = {
   css: {
       loaderOptions: {
           // 給 sass-loader 傳遞選項
           scss: {
               // @/ 是 src/ 的別名
               // 注意：在 sass-loader v7 中，這個選項名是 "data"
               prependData: ` @import "@/assets/custom_theme.scss"; @import "@nutui/nutui/dist/styles/index.scss"; `,
           }
       },
   }
}

設置bable.config.js

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    ["@nutui/babel-plugin-separate-import", {
      "libraryName": "@nutui/nutui",
      "libraryDirectory": "dist/packages",
      "style": "scss"
    }]
  ]
}

在src/assets/目錄里創建custom_theme.scss文件

// scss文件示例內容
$btn-gradient-bg: #043d6a;
$btn-gradient-active-bg: #053D7E;
$btn-gradient-color: #fff;

NutUI 主題變量 參考值

VueCLI3 使用NutUI Demo