京东nutui框架自定义主题

在官方文档里给出了自定义主题的方法，文档地址。文档里没有详细说明怎么配合vue-cli3的写法。

我自己在使用的时候，摸索了好一会儿。

第一步：设置bable.config.js

module.exports = {
  presets: [
    '@vue/app'
  ],
  'plugins': [
    ['@nutui/babel-plugin-separate-import', {
      'style': 'scss'   // 主要是这个地方，scss，这样可以引入scss的主题文件
    }]
  ]
}

第二步，在vue.config.js里设置webpack的scss的loader情况

css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.scss` 这个文件  
        data: `@import "./src/assets/scss/custom_theme.scss"; @import "@nutui/nutui/dist/styles/index.scss";`
      }
    }
  }

第三步：在src/assets/scss目录里写入custom_theme.scss文件

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

第四步，scss里主题变量

在开发文档里，没有详细说明具体有哪些主题样式变量。这个完整的样式变量，我在nutui的github库里找到了。

variable.scss