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";`
}
}
}
}这样就大功告成了，运行项目即可看到效果。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.07.14 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读