Question

我是使用Gulp和gulp-sourcemaps获取sass文件的新手。编译scss文件时我遇到了一个问题。所以我终于认为源图是有罪的，因为当我打开最后创建的css.map文件时，我没有发现我修改和编译的最后一个scss文件的提及。（但如果我禁用了源图创建则不行）。另外，在firebug中scss文件的路径并不正确。这是我的一项任务：

 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编译文件中。 my complete gulpfile

感谢

Answer 1

当我更改部分scss文件的路径时，我修复了我的问题，如上所示。因此@import "folder/myfile.scss"成为@import "./folder/_myfile.scss" 在不同的测试之后，不再有编译错误或缺少变量。

所以这次我认为这很好。

Gulp-sass：scss文件未编译+变量

1 个答案: