Question

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

不幸的是，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

What I'm sharing is based on my understanding of your question. I'll discuss it from the perspective of a new project, which seemed to work fine for me.

Let's assume we have a project called sassy and inside it is a package.json file created by running the following:

npm init -y

Then we are going to install Gulp and the SASS component like so:

npm install gulp gulp-sass -save-dev

Inside a Gulpfile.js at the root of our project we have the following code:

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"));
});

As you can probably guess from the above code, we have a vendor directory and a scss directory at the root of our project.

Since I don't know what is in your vendor directory, I've populated mine with randomness. Inside a vendor/colors.scss file I have the following:

.danger {
    color: red;
}

.light {
    color: silver;
}

I also have a nested file found at vendor/sizing/article.scss with the following code:

.title {
    font-size: 22px;
}

Now let's take a look at what is inside my scss directory.

I have a scss/main.scss file with two import statements like follows:

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

Again, all of this project is randomness. I'm just trying to show the build process from all these files and directories.

I have two more SCSS files in my scss folder. I have a file scss/sidebar/navigation.scss with the following code:

nav {
    padding: 10px;
}

Finally I have a file with a bunch of imports and extends. This file is scss/content/blog.scss and it contains the following:

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

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

Because the Gulp script is including the vendors directory, we can use relative paths for any of the files. We import the two files from the vendor directory and then extend various classes where necessary.

Running gulp sass will build the CSS files in the project's dist directory. Since I only used scss/main.scss for imports, it will contain all our styles.

Is this what you were trying to do? If yes, run through everything I just shared and see if it works for you.

Answer 2

IncludePaths采用字符串数组。

尝试更新以下内容。

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

参见文档：

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

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

2 个答案: