Question

我不确定我是否理解正确。

Gulp为所需的指南针mixin创建sass文件
然后我导入我的sass
这个sass文件然后由gulp编译。

到目前为止我：

使用gulp-compas

npm

我在项目中导入了我需要的指南针模块，并在我的SCSS文件中使用了mixin：

@import "/compass/css3/box-shadow";

#box-shadow-custom {
    @include box-shadow(red 2px 2px 10px); }
}

这里是我感到困惑的地方，所以我该把它放在哪里？或者我是否还要添加gulp任务？因为在指南针教程中我做了他们似乎只是像普通的scss文件一样导入它。

var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCSS = require('gulp-minify-css');
var rename = require('gulp-rename');
var del = require('del');

gulp.task('clean', function(){
    del(['../typo3/fileadmin/assets/css/2014-12-30-ag-style.min.css'],{'force':true})
})

gulp.task('sass', function () {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('../typo3/fileadmin/assets/css/'));
});

gulp.task('minify-css', function() {
  gulp.src('./css/*.css')
    .pipe(minifyCSS({keepBreaks:true}))
    .pipe(rename("2014-12-30-ag-style.min.css"))
    .pipe(gulp.dest('../typo3/fileadmin/assets/css/'));
});

// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch('./scss/*.scss', ['clean','sass']);
    gulp.watch('./css/*.css', ['minify-css']);
});

// Default Task
gulp.task('default', ['clean','sass','minify-css','watch']);

或者我只使用npm安装罗盘包？但是没有box-shadow.scss。

SASS +指南针与Gulp

0 个答案: