Vue+Ionic4，知虎偏行（三）自定义主题

ionic默认样式文件是scss，为了能解析它，装下环境依赖：

npm i node-sass -D
npm i sass-loader -D

然后再创建一个scss主题文件，存放目录和名字随意，如variables.scss，里面写上覆盖的样式：

:root {
  /** primary **/
  --ion-color-primary: #9b7af3;
  --ion-color-primary-rgb: 56, 128, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #3171e0;
  --ion-color-primary-tint: #4c8dff;
  /** white **/
  --ion-color-white: #fff;
  --ion-color-white-rgb: 255,255,255;
  /*** 自定义 **/
  --ion-text-color: #0d0d0d;
  --ion-background-color: #f2f2f2;
  --ion-background-color-step-250: #bfbfbf;
  --ion-background-color-step-500: #808080;
  --ion-background-color-step-750: #404040;
  --ion-background-color-step-1000: #000000;
  --ion-text-color-step-250: #404040;
  --ion-text-color-step-500: #808080;
  --ion-text-color-step-750: #bfbfbf;
  --ion-text-color-step-1000: #ffffff;
}

接着把文件添加到配置中，即创建vue.config.js文件，添加内容：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.scss` 这个文件
        data: `@import "~@/variables.scss";`
      }
    }
  }
}

这样就大功告成了，运行项目即可看到效果。