如何在variables.scss及Ionic2/3中导入自定义SCSS颜色？

嘿，这两个问题都是Ionic 2/3项目里SCSS变量管理的常见需求，我给你一步步讲清楚👇

首先，建议你把颜色变量单独放在一个「部分SCSS文件」里（文件名以下划线开头，比如_colors.scss，这样SCSS不会把它单独编译成CSS文件），比如这样定义颜色：

// _colors.scss
$brand-primary: #165DFF;
$brand-secondary: #36D399;
$brand-warning: #FBBD23;

接下来打开src/theme/variables.scss，用@import引入这个文件就行，路径要和你的文件位置对应：

// variables.scss
// 如果_colors.scss和variables.scss在同一目录，直接写文件名（省略下划线和.scss）
@import './colors';

// 现在就可以用这些自定义颜色配置Ionic的主题色了
$colors: (
  primary: $brand-primary,
  secondary: $brand-secondary,
  warning: $brand-warning,
  // 还可以保留Ionic默认的其他颜色，比如danger、light等
);

如果你的颜色文件在别的目录，比如src/assets/styles/_colors.scss，那导入路径就要改成：

@import '../../assets/styles/colors';

不管是组件的样式文件（比如src/app/profile/profile.scss）还是全局自定义样式，只要想用到variables.scss里的变量，在文件开头导入它就可以：

// profile.scss
// 根据你的文件位置调整导入路径，这里假设variables.scss在src/theme下
@import '../../theme/variables';

.profile-avatar {
  // 使用Ionic主题变量
  border-color: $primary;
  // 或者直接用你自己定义的颜色变量
  background-color: $brand-secondary;
}

小提醒： #

• SCSS允许省略.scss后缀和文件名前的下划线，这是部分文件的标准用法
• 如果你遇到变量未识别的报错，大概率是路径写错了，仔细核对一下相对路径就行
• 虽然Ionic 2/3默认会全局注入variables.scss的变量，但手动导入能避免一些奇怪的环境问题，更可靠

内容的提问来源于stack exchange，提问作者Simone NoLogo