我想在我的项目中使用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();
});
理想情况下,你的application.scss
应该只有你的其他自定义.scss文件使用的变量,这个想法是,你改变一个值,它将改变所有的.scss文件。
并且您的gulp
进程会将您的所有文件编译为缩小的css文件。
看看,ionic scss folder和他们的variables file
_variables.scss
中使用的变量与ionic.app.scss
相同。你可以在_variables.scss
中的ionic.app.scss
中定义所有变量。
希望你对Ionic如何做到这一点有所了解,所以你可以遵循相同的结构
我不知道如何改变它gulp但我打开另一个终端,我使用sass --watch功能(例如:sass --watch scss / application.scss:www / css / application.css),无论你做什么application.scss中的更改将在您的项目中自动更新。
将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);
});