Gulp-Sass:未编译的CSS文件+变量 [英] Gulp-sass : scss file not compiled + variables

问题描述

对于使用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文件+变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！