如何让 SASS 变量在 Ionic 项目中工作？答案

【问题标题】：How to get SASS variables working in Ionic project?如何让 SASS 变量在 Ionic 项目中工作？
【发布时间】：2020-12-10 10:52:08
【问题描述】：

我终于需要 SASS 变量，所以我试图让它们第一次工作，但它们似乎没有加载，或者如果它们正在加载，它们没有被翻译。

这是一个 Ionic v1 应用，使用 Ionic CLI v6.10.1 运行

这是我的 gulpfile.js (Gulp v4)：

var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCss = require('gulp-clean-css');
var rename = require('gulp-rename');

var paths = {
  sass: ['./scss/**/*.scss']
};

gulp.task('default', ['sass']);

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass())
    .on('error', sass.logError)
    .pipe(gulp.dest('./www/css/'))
    .pipe(cleanCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

gulp.task('watch', ['sass'], function() {
  gulp.watch(paths.sass, ['sass']);
});

在我的 projectRoot/scss/ionic.app.scss 文件中，我有：

$tabs-icon-size:                  25px !default;
$tabs-height:                     35px !default;
$eBlue:                     #192a67;
$eBlueRGB:                  25, 42, 103;
$eYellow:                   #f8d294;
$eYellowRGB:                248, 210, 148;
$eOrange:                   #f5aa07;
$eOrangeRGB:                245,168,7;

// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

为了测试我的第一个 scss 变量，我在一个类中添加了一个自定义颜色：

.button-custom {
  background-color: $eBlue; 
}

但它不起作用。检查我看到button-custom 应用于我要更改的按钮的元素，但background-color: $eBlue ; 被删除。

在ionic build android 输出的开头我看到： [23:27:44] Invoking sass gulp task.

在进一步阅读 Ionic 中的 SASS vars 之后，我将自定义变量添加到 www/lib/ionic/scss/_variables.scss 文件中，以为我的变量位于错误的位置，但在重新编译我的应用程序后它仍然无法正常工作。

我做错了什么？

【问题讨论】：

标签： html css ionic-framework sass

【解决方案1】：

我终于明白了。

将所有变量放入./scss/ionic.app.scss 文件中。

从项目的 CLI 中，运行 gulp sass - 这会将一个新文件复制到 ./css/ionic.app.css，并在整个自定义 css 文件中应用所有变量。

在 HTML index.html 中 - 删除：<link href="lib/ionic/css/ionic.css" rel="stylesheet">

并添加：<link href="css/ionic.app.css" rel="stylesheet">

【讨论】：