Gulp Sass不编译局部 [英] Gulp Sass not compiling partials

问题描述

所以我将Gulp Sass与gulp-changed结合使用(我也尝试过gulp-newer，具有更新的语法更改)，并查看文件夹中的所有scss文件.

So I am using Gulp Sass with gulp-changed (i've also tried gulp-newer with the updated syntax changes) and watching all the scss files in my folders.

当我更改基本的scss文件时，它将进行编译而没有任何问题.

When I change a base scss file it will compile without any problems.

但是，如果我更改了部分文件，它将无法编译依赖于该部分文件的sass文件.

However if I change a partial it won't compile the sass file that has a dependency on that partial.

Gulp

var SRC = './stylesheets/**/*.scss';
var DEST = './stylesheets';
gulp.task('sass', function() {
  return gulp.src(SRC)
    .pipe(changed(DEST, { extension: '.css' }))
    .pipe(plumber({
        errorHandler: handleErrors
    }))
    .pipe(sourcemaps.init())
    .pipe(sass({
            includePaths: [
                'C:/var/www/mobile 2/stylesheets'
    ]}))
    .pipe(sourcemaps.write('./'))
    .on('error', handleErrors)
    .pipe(gulp.dest(DEST))
});

文件夹

├── scss
│    └── base.scss
│          ├── _partial1.scss
│          └── _partial2.scss
│          └── anotherBase.scss
│                 ├── _anotherBasePartial1.scss
│                 └── _anotherBasePartial2.scss

对base.scss || anotherBase.scss进行更改，对partial1.scss进行更改.

Making changes to base.scss || anotherBase.scss changes made, making changes to partial1.scss nothing.

如您在日志中所见:

[15:14:02] Starting 'sass'... //here i changed _partial1.scss
[15:14:03] Finished 'sass' after 248 ms
[15:18:20] Starting 'sass'...
[15:18:20] Finished 'sass' after 289 ms
[BS] File changed: c:\var\www\mobile 2\stylesheets\sitescss\responsive\tools\base.css
[15:18:24] Starting 'sass'...
[15:18:24] Finished 'sass' after 289 ms
[BS] File changed: c:\var\www\mobile 2\stylesheets\sitescss\responsive\tools\anotherBase.css

只要部分更改，我希望它可以编译scss.

I would like it to compile the scss whenever a partial is changed.

推荐答案

演出有点晚了，但是如果我理解你的话；您想在更改任何scss文件时运行构建，无论该文件是否为局部文件，对不对? (但不将部分文件包括在构建本身中，因为这是由sass @import处理的.)

A bit late for the show, but if I understand you right; you want to run your build when you change ANY scss file, whether that being a partial or not, right? (but not including the partials in the build itself – as that is handled by sass @import).

我通常使用这种方法:

var scss_source = [ 'path/to/scss' ],
    partials_source = [ 'path/to/partials' ];

gulp.task('scss', function () {
    gulp.src( scss_source )
    ...
});

var scss_watcher = gulp.watch([ scss_source, partials_source ], [ 'scss' ]);

我仅将scss_source传递给内部版本，但将两者都传递给观察者.这样，我可以将所有部分内容与其余的scss源分开，但是对任何文件的更改都会触发构建.而且我不必再包含另一个模块来处理此问题.

I pass only the scss_source to the build, but BOTH sources to the watcher. That way I can seperate all partials from the rest of the scss sources, but have changes to any of the files trigger a build. And I don't have to include yet another module for handling this.

我通常将我的部件保存在单独的目录中(请认为是共享的，不要与其他scss文件混在一起).

I usually keep my partials in separate directories (think shared, and not mixed with other scss files).

希望这对您来说很有意义-否则，我深表歉意.

Hope this makes sense in your case – otherwise I do apologize.

这篇关于Gulp Sass不编译局部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！