Question

我正在使用离子框架构建移动应用程序，我想使用Sass。我按照离子团队提供的Sass教程，但我遇到了问题。我不熟悉gulp，这就是为什么我可能会遗漏一些东西。

我已经更改了我的架构文件夹，而且我仍然使用带有ionicapp.css和ionic.app.min.css（www / css）的sccs创建的css文件夹。 我想将此文件夹的位置（和生成）更改为www / assets / css 。我怎么能这样做？

我的文件夹架构是：

| scss
    | ionic.app.scss
| www
    | app
        | app.route.js
        | app.controllers.js
            | My functionalities ..
    | assets
            | css
            | img
            | lib
                 | ionic
    | index.html

我的scss / ionic.app.scss文件：

/*
To customize the look and feel of Ionic, you can override the variables
in ionic's _variables.scss file.

For example, you might change some of the default colors:

$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ffc900 !default;
$assertive:                       #ef473a !default;
$royal:                           #886aea !default;
$dark:                            #444 !default;
*/

// The path for our ionicons font files, relative to the built CSS in www/css

$ionicons-font-path: "../assets/lib/ionic/fonts" !default;

// Include all of Ionic
@import "www/assets/lib/ionic/scss/ionic";

我的gulpfile.js的一部分

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/assets/css/'))
.pipe(minifyCss({
  keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/assets/css/'))
.on('end', done);
});

Answer 1

你的gulpfile.js应该是这样的：

gulp.task('sass', function(done) {
    gulp.src('./www/assets/scss/ionic.app.scss')
        .pipe(sass())
        .on('error', sass.logError)
        .pipe(gulp.dest('./www/assets/css/'))
        .pipe(minifyCss({
            keepSpecialComments: 0
        }))
        .pipe(rename({
            extname: '.min.css'
        }))
        .pipe(gulp.dest('./www/assets/css/'))
        .on('end', done);
});

使用离子框架更改已编译的css输出位置SASS

1 个答案: