如何在 Ionic 框架中使用 SASS？

Posted 2023-02-19

【中文标题】如何在 Ionic 框架中使用 SASS？

【英文标题】：How to use SASS in Ionic framework?

【发布时间】：2015-09-06 18:30:53

【问题描述】：

我正在尝试在我的项目中使用 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 服务器并更改 “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();
);

【参考方案1】：

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

您的gulp 进程会将您的所有文件编译成一个缩小的css 文件。

看看ionic scss folder 和他们的variables file

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

希望你对 Ionic 是如何做到的有一个想法，所以你可以遵循相同的结构

【讨论】：

你没有得到我的问题我需要添加另一个文件。如果我对使用 _variables.scss 或 ionic.app.scss 文件不感兴趣。我想在我的 sass 中添加这个 application.scss文件夹，它应该生成另一个 css 文件。我将在 index.html 上导入该 css 文件

但是当我在 sass 文件夹中添加 application.scss 时，gulp 进程不看我的文件。不反映在 html 视图中

您必须将行 gulp.src('./scss/ionic.app.scss') 更改为 gulp.src('./scss/*.scss')，才能选择任何 .scss 文件

【参考方案2】：

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

【参考方案3】：

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

这将自动将该文件夹或任何子文件夹中的所有 .scss 文件构建到 /www/css/ 中相应的 .css 文件中。您当前的 Gulp 文件正在构建 ionic.app.css 和 ionic.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);
);