在離子項目中設置SASS

Question

以下是我在項目中運行以實現SASS的命令-

ionic setup sass

安裝節點依賴項后，我運行ionic serve命令並嘗試更改-使用teal顏色代碼的$positive ，但是即使我在瀏覽器中重新加載該頁面也不能反映出來，盡管如果我在重新運行_variables.scss更改為$ positive命令ionic serve它顯示顏色。

我相信我只需要在scss/ionic.app.scss進行更改，它將自動反映更改。

讓我知道我在這里想念的東西。

僅供參考-以下是我的index.html的CSS

<!-- compiled css output -->
<link href="css/ionic.app.css" rel="stylesheet">

以下是我的gulpfile-

var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var sh = require('shelljs');

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(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

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

gulp.task('install', ['git-check'], function() {
  return bower.commands.install()
    .on('log', function(data) {
      gutil.log('bower', gutil.colors.cyan(data.id), data.message);
    });
});

gulp.task('git-check', function(done) {
  if (!sh.which('git')) {
    console.log(
      '  ' + gutil.colors.red('Git is not installed.'),
      '\n  Git, the version control system, is required to download Ionic.',
      '\n  Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.',
      '\n  Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
    );
    process.exit(1);
  }
  done();
});

編輯1-

屏幕截圖1-

屏幕截圖2-

屏幕截圖3-

我在www文件夾中的CSS-

現在，您可以在第三個屏幕截圖中顯示_variables.scss （最后），在其中我正在更改值，但它沒有監視我的更改。 一旦完成ionic serve它就會顯示顏色變化。

Answer 1

您需要做的是在要覆蓋的顏色上添加!default標志，這樣它將覆蓋離子性的顏色。

一個例子：

$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ffc900 !default;
$assertive:                       #9D0000 !default;
$royal:                           #886aea !default;
$dark:                            #25272A !default;
$light-black:                     #303134 !default;
$gray:                            #939393 !default;
$light-gray:                      #BFBFBF !default;
$dark-brand:                      #0A9693 !default;
$danger-dark:                     #E0483E !default;
$facebook:                        #3B5998 !default;

PS：此配置適用於在聲明這些變量之后導入Ionic的情況