gulp-sass includePaths 未能包含供应商 scss（也可能是订购问题）

Question

我的应用程序 sass（在 scss 文件中）位于 styles 目录的各个子目录中，其中一些 @extend sass来自不同供应商的样式（通过 bower）位于 vendor 目录下的各个子目录中。

不幸的是，sass 任务无法获取那些供应商 scss 文件和我失败的任何 @extend 声明，因为它们找不到他们试图扩展的 sass，例如

Error in plugin 'sass'
Message:
    styles/censum/censum.scss
Error: ".graph-row" failed to @extend ".row".
       The selector ".row" was not found.
       Use "@extend .row !optional" if the extend should be able to fail.
        on line 2 of styles/censum/censum.scss

我的最小化示例如下。

gulp.task('sass', function () {
  gulp.src('./styles/**/*.scss')
    .pipe(gulpSass({ includePaths: ['./vendor'] }).on('error', gulpSass.logError));
});

我还尝试将供应商目录添加到 gulp.src 而不是使用 includePaths，例如

gulp.task('sass', function () {
  gulp.src(['./vendor/**/*.scss', './styles/**/*.scss'])
    .pipe(gulpSass().on('error', gulpSass.logError));
});

这似乎确实引用了供应商文件（我猜它把所有东西都拖进去了），但我确实遇到了以下问题：

Message:
    vendor/bower/eonasdan-bootstrap-datetimepicker/src/sass/_bootstrap-datetimepicker.scss
Error: Undefined variable: "$btn-primary-bg".
        on line 7 of vendor/bower/eonasdan-bootstrap-datetimepicker/src/sass/_bootstrap-datetimepicker.scss
$bs-datetimepicker-active-bg: $btn-primary-bg !default;

这可能是排序问题？

Answer 1

IncludePaths 采用字符串数组。

尝试更新为以下内容。

gulp.task('sass', function () {
  gulp.src('./styles/**/*.scss')
    .pipe(gulpSass({ includePaths: ['./vendor'] }).on('error', gulpSass.logError));
});

查看文档：

https://github.com/sass/node-sass#includepaths

Answer 2

我分享的内容是基于我对你的问题的理解。我将从一个新项目的角度来讨论它，这对我来说似乎很好。

假设我们有一个名为 sassy 的项目，其中有一个由 [=94= 创建的 package.json 文件]宁以下：

npm init -y

然后我们将安装 Gulp 和 SASS 组件，如下所示：

npm install gulp gulp-sass -save-dev

在项目根目录的 Gulpfile.js 中，我们有以下代码：

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
  return gulp
    .src("./scss/**/*.scss")
    .pipe(sass({includePaths: ['./vendor']}))
    .pipe(gulp.dest("./dist"));
});

你大概可以从上面的代码中猜到，我们在项目的根目录下有一个 vendor 目录和一个 scss 目录.

因为我不知道您的 vendor 目录中有什么，所以我随机填充了我的目录。在 vendor/colors.scss 文件中，我有以下内容：

.danger {
    color: red;
}

.light {
    color: silver;
}

我还在 vendor/sizing/article.scss 找到了一个嵌套文件，代码如下：

.title {
    font-size: 22px;
}

现在让我们看看我的 scss 目录里有什么。

我有一个 scss/main.scss 文件，其中包含如下两个导入语句：

@import "./sidebar/navigation";
@import "./content/blog";

同样，这个项目的所有内容都是随机的。我只是想展示所有这些文件和目录的构建过程。

我的 scss 文件夹中还有两个 SCSS 文件。我有一个包含以下代码的文件 scss/sidebar/navigation.scss：

nav {
    padding: 10px;
}

我终于有了一个包含大量导入和扩展的文件。该文件是 scss/content/blog.scss 并且包含以下内容：

@import "colors";
@import "sizing/article";

.title {
    @extend .danger;
    @extend .title;
    font-weight: bold;
}

因为 Gulp 脚本包含 vendors 目录，我们可以对任何文件使用相对路径。我们从 vendor 目录中导入这两个文件，然后在必要时扩展各种类。

运行 gulp sass 将在项目的 dist 目录中构建 CSS 文件。由于我只使用 scss/main.scss 进行导入，它将包含我们所有的样式。

这是你想要做的吗？如果是，运行浏览我刚刚分享的所有内容，看看它是否适合你。

gulp-sass includePaths 未能包含供应商 scss（也可能是订购问题）

gulp-sass includePaths failing to include vendor scss (possible ordering issue as well)

css

sass

gulp

gulp-sass