如何在离子框架中使用SASS？

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并反映在视图中。

现在我试着去做。我想添加自己的文件“application.scss”在sass文件夹中应创建另一个文件“application.css”在css文件夹中。所以无论我在“application.scss”中编码，它都在“application.css”文件中，它反映在视图中。我输入“application.css” in index.html file。

我在哪写这段代码让我生成这个文件并观看我的“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中定义ionic.app.scss中定义的所有变量。

希望你对离子是如何做的想法，所以你可以按照同样的结构

Answer 2

我不知道如何去改变它在一饮而尽，但我打开了另一端，我用青菜--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 和 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); 
});