[英]Setting up SASS in ionic project
Following is the command which I run to implement SASS
in my project - 以下是我在项目中运行以实现SASS
的命令-
ionic setup sass
After node dependencies installed, I run - ionic serve
command and tried changing - $positive
with teal
color code but it is not reflecting even if I reload the page in browser, though If I make change to $positive in _variables.scss
after rerunning the command ionic serve
it is showing the color. 安装节点依赖项后,我运行ionic serve
命令并尝试更改-使用teal
颜色代码的$positive
,但是即使我在浏览器中重新加载该页面也不能反映出来,尽管如果我在重新运行_variables.scss
更改为$ positive命令ionic serve
它显示颜色。
I believe I only need to make change in scss/ionic.app.scss
and it should automatically reflect the changes. 我相信我只需要在scss/ionic.app.scss
进行更改,它将自动反映更改。
Let me know what I am missing here. 让我知道我在这里想念的东西。
FYI - Following is the CSS in my index.html
仅供参考-以下是我的index.html
的CSS
<!-- compiled css output -->
<link href="css/ionic.app.css" rel="stylesheet">
Following is my gulpfile - 以下是我的gulpfile-
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())
.on('error', sass.logError)
.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();
});
Edit 1- 编辑1-
Screenshot 1- 屏幕截图1-
Screenshot 2- 屏幕截图2-
Screenshot 3 - 屏幕截图3-
My CSS in www folder - 我在www文件夹中的CSS-
Now you can in the 3rd screenshot I am having _variables.scss
(at last) in which I am changing values, but it is not watching my changes. 现在,您可以在第三个屏幕截图中显示_variables.scss
(最后),在其中我正在更改值,但它没有监视我的更改。 Once I did ionic serve
it is showing the color change then. 一旦完成ionic serve
它就会显示颜色变化。
What you need to do is add the !default
flag to the colour you're overriding, that way it will overwrite the Ionic ones. 您需要做的是在要覆盖的颜色上添加!default
标志,这样它将覆盖离子性的颜色。
An example: 一个例子:
$light: #fff !default;
$stable: #f8f8f8 !default;
$positive: #387ef5 !default;
$calm: #11c1f3 !default;
$balanced: #33cd5f !default;
$energized: #ffc900 !default;
$assertive: #9D0000 !default;
$royal: #886aea !default;
$dark: #25272A !default;
$light-black: #303134 !default;
$gray: #939393 !default;
$light-gray: #BFBFBF !default;
$dark-brand: #0A9693 !default;
$danger-dark: #E0483E !default;
$facebook: #3B5998 !default;
PS: This configuration works with Ionic being imported after the declaration of these variables PS:此配置适用于在声明这些变量之后导入Ionic的情况
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.