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";`
}
}
}
}
这样就大功告成了，运行项目即可看到效果。
