angularjs 如何在Ionic框架中使用SASS?

wfauudbj  于 2022-10-31  发布在  Angular
关注(0)|答案(3)|浏览(206)

我正在尝试在我的项目中使用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>中添加了Paragraph标签:

<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();
});
qlzsbp2j

qlzsbp2j1#

理想情况下,您的application.scss应该只有其他自定义.scss文件使用的变量,其思想是,您更改一个值,它将更改它的所有.scss文件。
并且gulp进程会将所有文件编译为一个缩小的css文件。
看一看,ionic scss folder和他们的variables file
_variables.scss中使用的变量与ionic.app.scss相同。您可以在ionic.app.scss中定义_variables.scss中定义的所有变量。
希望你有一个关于离子如何做到这一点的想法,所以你可以遵循相同的结构

68bkxrlz

68bkxrlz2#

我不知道如何改变它在大口,但我打开另一个终端,我用sass -手表功能(例如:sass --watch scss/application.scss:www/css/application.css),无论何时,如果你在application.scss中做了更改,它将自动更新到你的项目中。

zour9fqk

zour9fqk3#

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);
});

相关问题