我正在尝试在我的项目中使用 SASS。我打开此链接并遵循所有命令。我创建了一个项目并设置了 SASS。
http://learn.ionicframework.com/formulas/working-with-sass/
我得到了这个目录结构
scss
|
|—>ionic.app.scss
www
|
|->css
|
|——>ionic.app.css
在 index.html 我导入的文件 ionic.app.css 在
style
标签。所以无论我在 中改变什么ionic.app.scss 文件来了 ionic.app.css 文件并反射(reflect)在 View 中。如果我在 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 并反射(reflect)在 View 中。
现在我尝试做的事情。我想添加自己的文件 “application.scss” 在应该创建另一个文件的 sass 文件夹中 “application.css” 在 css 文件夹中。因此,无论我在“application.scss”中编写什么代码,它都会出现在“application.css”文件中并反射(reflect)在 View 中。我进口 “application.css” 在 index.html 文件。
我在哪里编写此代码,以便生成此文件并查看我的 “application.scss” 文件。
当我运行 ionic server 并且我更改了 中的任何内容时“ionic.app.scss” 归档它同时反射(reflect)在 View 上。我需要对 做同样的事情“application.scss” .如果我改变 “application.scss” 它会反射(reflect)我的观点。
这是我的 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
process 会将您的所有文件编译为缩小的 css 文件。
看看,ionic scss folder和他们的 variables file
以及 _variables.scss
中使用的变量与 ionic.app.scss
相同.您可以在 _variables.scss
中定义所有变量在 ionic.app.scss
.
希望你对 Ionic 如何做到这一点有一个想法,所以你可以遵循相同的结构
关于angularjs - 如何在 Ionic 框架中使用 SASS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30960754/