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