Question

我正在尝试在我的项目中使用SASS。我打开此链接并按照所有命令操作。我创建了一个项目并设置了SASS。 http://learn.ionicframework.com/formulas/working-with-sass/

我有这个目录结构

   scss
     |
     |—>ionic.app.scss
   www
     |
     |->css
          |
          |——>ionic.app.css

在 index.html 文件中，我在style标记中导入了 ionic.app.css 。因此无论我在 ionic.app.scss 文件中进行哪些更改，它都会出现 ionic.app.css 文件并在视图中反映。

如果我在index.html中添加一些元素，例如我在<ion-content>中添加了段落标记：

<ion-pane>
    <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
    </ion-header-bar>
    <ion-content>
        <p id=“addp”>Testparagraph</p>
    </ion-content>
</ion-pane>

并添加了此

#addp{
background-color:yellow;
}

在 ionic.app.scss 中，它在 ionic.app.css 中添加并反映在视图中。

现在我尝试做什么。我想在sass文件夹中添加自己的文件“application.scss”，这应该在css文件夹中创建另一个文件“application.css”。因此，无论我在“application.scss”中编码，它都会出现在“application.css”文件中，并在视图中反映出来。我在 index.html 文件中导入“application.css”。

我编写此代码的位置，以便生成此文件并观看我的“application.scss”文件。

当我运行离子服务器并且我在“ionic.app.scss”文件中更改任何内容时，它同时反映在视图上。我需要对“application.scss”做同样的事情。如果我更改“application.scss”，则会反映我的观点。

这是我的 gulpfile.js

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({
      errLogToConsole: true
    }))
    .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();
});

Answer 1

理想情况下，您的application.scss应该只包含其他自定义.scss文件使用的变量。想法是，您更改一个值，它将更改所有.scss文件。

并且您的gulp进程会将所有文件编译为缩小的css文件。

请查看ionic scss folder及其variables file

_variables.scss中使用的变量与ionic.app.scss相同。您可以在_variables.scss的{{1}}中定义所有变量。

希望你对Ionic如何做到这一点有所了解，所以你可以遵循相同的结构

Answer 2

我不知道如何在gulp中更改它但是我打开了另一个终端并使用了sass --watch功能（例如： sass --watch scss / application.scss：www / css / application.css ），无论何时如果您在application.scss中进行更改，它都会在您的项目中自动更新。

Answer 3

将gulp.src('./scss/ionic.app.scss')更改为gulp.src(paths.sass)。

这将自动将该文件夹或任何子文件夹中的所有.scss文件构建到/ www / css /中相应的.css文件中。您当前的Gulp文件正在构建ionic.app.css 和离子.app.min.css，其中第二个缩小了最小的文件大小。它将对任何其他文件执行相同的操作。您将能够只写 /scss/application.scss 并完成它。

如果您想省去很多麻烦，可以使用此替代方法将所有SCSS文件构建到单个build.css和build.min.css文件中。

gulp.task('sass', function(done) {
  gulp.src(paths.sass)
    .pipe(sass({
      errLogToConsole: true
    }))
    .pipe(concat('build.css'))
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

如何在Ionic框架中使用SASS？

3 个答案: