用 gulp-sass 编译 sass

Question

我正在尝试使用以下 Gulp 任务编译一些 .scss：

var gulp = require("gulp"),
    rimraf = require("rimraf"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    uglify = require("gulp-uglify"),
    sass = require('gulp-sass');

var paths = {
    webroot: "./wwwroot/"
};

paths.sass = paths.webroot + "lib/foundation-apps/scss/**/*.scss";

gulp.task('sass', function () {
  gulp.src(paths.sass)
    .pipe(sass())
    .pipe(gulp.dest(paths.webroot + '/css/'));

});

这是命令的输出：

但编译结果如下：

为什么只编译了foundation.scss？

Answer 1

检查基础应用程序 bower.json 文件的结构（在包文件夹中）。

如果在项目 github 回购中找到相同的内容，应该是这样的：

...

  "main": [
    "scss/foundation.scss",
    "dist/js/foundation-apps.js",
    "dist/js/foundation-apps-templates.js"
  ],

...

这意味着只有scss/foundation.scss文件会被编译。如果您想指定其他文件，您应该在您的应用 bower.json 文件（在您的根路径）

上创建覆盖

尝试在文件末尾添加如下内容：

...

"overrides": {
    "foundation-apps": {
      "main": [
          "scss/foundation.scss",
          ... (all the other files you want) ...
          "dist/js/foundation-apps.js",
          "dist/js/foundation-apps-templates.js"
      ]
    }
}

...

通过这种方式，您可以在不覆盖自定义配置的情况下更新您的版本（对于默认包文件夹 bower.json）

希望对您有所帮助。

用 gulp-sass 编译 sass

Compile sass with gulp-sass

gulp

gulp-sass