问题描述
对于使用sass文件的Gulp和gulp-sourcemaps,我是新手.编译scss文件时遇到问题.所以我最终认为sourcemaps是有罪的,因为当我打开最后一个创建的css.map文件时,我没有提到我修改和编译的最后一个scss文件(但是如果我禁用了sourcemap创建则不会).此外,firebug中的scss文件路径也不正确.这是我的大任务:
I'm new on using Gulp and gulp-sourcemaps for sass files.I encouter an issue when compiling scss file.So I finally think sourcemaps is the guilt because when I open the last created css.map file, I don't find mention of my last scss file modified and compiled.(but not if I disable sourcemap creation).In addition, path to scss files in firebug isn't the right one.This is my gulp task:
var basePaths = {
src: './sass/**/*.scss', // fichiers scss à surveiller
dest: './css/', // dossier à livrer
node_modules: './node_modules/',
gems:'/home/webmaster/vendor/bundle/gems/'
};
var assetsPath = {
gems: [
basePaths.gems + 'susy-2.2.2/sass',
basePaths.gems + 'breakpoint-2.7.1/stylesheets',
basePaths.node_modules + 'typey/stylesheets'
],
node_modules: [
//Ajoutés avec les gems pour simplifier
],
};
var bs_reload = browserSync.reload;
gulp.task('sasscompil', function () {
return gulp.src(basePaths.src)
.pipe(plugins.sourcemaps.init()) // Start Sourcemaps
.pipe(plugins.sass({
noCache: true,
bundleExec: true,
includePaths: [].concat(
assetsPath.gems,
assetsPath.node_modules,
folderPaths.styles.src
),
sourceMap: true,
outputStyle: 'compressed'
})
// .on('error', plugins.sass.logError)
// .on('error', console.error.bind(console, 'SASS Error :'))
//Avec fonction anti-crash sur erreurs
.on('error', onError)
)
.on('error', function(err){
displayError(err);
})
.pipe(plugins.sourcemaps.write('.'))//Pour créer le fichier css.map à coté du css
.pipe(gulp.dest(basePaths.dest))
.pipe(plugins.size({title:'Taille du fichier css'}))
.pipe(plugins.notify({
title: "SASS Compilé - Fichier Map créé",
message: "Les fichiers SCSS sont compilés dans le dossier CSS",
onLast: true
}))
.pipe(bs_reload({stream: true}))// prompts a reload after compilation
;
});
实际上,我测试了简单的编译,最后一个文件(使用另一个scss文件中定义的变量)没有添加到application.css编译文件中.我完整的gulpfile
Actually, I test simple compilation, and the last file (using variables defined in another scss file) isn't added to the application.css compiled file.my complete gulpfile
谢谢
推荐答案
如上所述,当我更改了局部scss文件的路径时,我解决了我的问题.所以@import "folder/myfile.scss"
变成@import "./folder/_myfile.scss"
经过差异测试后,不再有编译错误或缺少变量.
I fix my issue when I changed the path of partials scss files as indicate above.So @import "folder/myfile.scss"
become @import "./folder/_myfile.scss"
No compilation errors or missing variables anymore after differents tests.
所以我认为这次很好.
这篇关于Gulp-Sass:未编译的CSS文件+变量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!