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.

吞咽

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.

正如你在日志中看到的:

As you can see in the log:

[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:varwwwmobile 2stylesheetssitescss
esponsive	oolsase.css
[15:18:24] Starting 'sass'...
[15:18:24] Finished 'sass' after 289 ms
[BS] File changed: c:varwwwmobile 2stylesheetssitescss
esponsive	oolsanotherBase.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屋！