作者:文文的爱天使_152 | 来源:互联网 | 2023-01-11 23:28
好的,我对此进行了大量研究,但是在一个drupal站点上,我有一个zurb基础主题,并且对此感到非常满意。我唯一的问题是自定义scss组件时。我正在使用gulp对其进行编译,因此它可以很好地重新创建css文件。但是,我也想将它提供给我min.css文件和css.map文件,但是我似乎无法弄清楚。我在gulpfile.js上尝试了许多不同的迭代,但这是我的最新版本。
它仅产生css文件。
var sassFiles = './themes/zurb_foundation/scss/**/*.scss',
cssDest = './themes/zurb_foundation/css';
gulp.task('styles', function(){
gulp.src(sassFiles)
.pipe(sourcemaps.init())
.pipe(autoprefixer())
.pipe(gulp.dest(cssDest))
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
.pipe(gulp.dest(cssDest))
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(rename({ extname: 'min.css' }))
.pipe(sourcemaps.write('./themes/zurb_foundation/css'))
.pipe(gulp.dest(cssDest))
});
gulp.task('watch', function() {
livereload.listen();
gulp.watch(sassFiles, ['styles']);
})
我终于得到它产生以下错误:
CssSyntaxError: /Users/USERNAME/Desktop/SITEFOLDER/ROOTDIR/themes/zurb_foundation/scss/foundation.scss:1:1: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the
postcss-scss parser> 1 | // Foundation by ZURB
我想在这一点上,我的问题是我应该如何设置gulpfile来处理postcss-scss解析?
1> amyloula..:
因此,首先我们声明必要的包,const
因为这些值不应更改其分配。
const gulp = require('gulp');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const cssmin = require('gulp-cssmin');
然后,我们编写一个名为sass的gulp任务,在其中我们以一种.scss
格式搜索styles文件夹中的所有文件。
我们检查并记录所有错误,我们创建源映射,该源映射允许浏览器将SASS生成的CSS映射回原始源文件(如果您要使用.scss
/ .css
那样)。
然后,我们将您的新.css
文件写入文件public/styles
夹。
gulp.task('sass', function () {
return gulp.src('./styles/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('./public/styles'));
});
之后,我们编写第二个gulp任务,称为minify-css
。
我们在.css
样式文件夹中查找所有格式的文件。
首先,我们为所有css属性自动添加前缀。例如,如果您在其中设置了一个CSS类:
user-select: none;
自动前缀将处理添加:
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
在此之后,我们进行缩小,串联,然后将新的缩小的CSS文件命名为main.min.css
,然后将其保存在public/styles
文件夹中。
gulp.task('minify-css', function(){
gulp.src(['./styles/*.css'])
.pipe(autoprefixer({
browsers: ['last 2 versions']
}))
.pipe(cssmin())
.pipe(concat('main.css'))
.pipe(rename("main.min.css"))
.pipe(gulp.dest('./public/styles'));
});
然后build
,我们编写一个名为的任务,以便仅通过在终端中运行就可以按时间顺序调用sass
和minify-css
任务gulp build
。
gulp.task('build', [‘sass’, ‘minify-css’]);