node.js - node-sass-jspm-importer 路径配置的使用

Question

我正在尝试了解这个 sass 导入器: https://github.com/idcware/node-sass-jspm-importer

我不完全确定我正在尝试正确使用它。

我正在尝试使用使用它来导入 font-awesome 的示例。 GitHub页面提供了以下示例

gulp.task('build-sass', function() {
    return gulp.src('src/sass/*.scss')
        .pipe(sass({
            errLogToConsole: true,
            functions: sassJspm.resolve_function('/lib/'),
            importer: sassJspm.importer
        }))
        .pipe(gulp.dest('dist/css'));
});

在这个例子中，我不确定这部分有多大的影响:

gulp.src('src/sass/*.scss')

当要从具有如下路径的 JSPM 包导入 SASS/SCSS 文件时，此路径有何意义:

jspm_packages/npm/font-aweesome@4.6.3/scss

本节中的lib文件夹

functions: sassJspm.resolve_function('/lib/'),

应该是/jspm_packages/因为在文档中它指定了

Where /lib/ is the path to your jspm_packages folder in your document root.

在这种情况下，为什么他们不直接指定 jspm_packages？

Answer 1

我之前的想法都是错误的。我缺少的一件事是，使用 SASS/SCSS，您可以使用导入指令。因此，让 SASS 编译器/导入器生成一个 CSS 文件比导入许多生成的 CSS 文件更有意义。

因此，我在 src 中的 JSPM_Packages 文件夹之外创建了一个名为 SCSS 的 SCSS 文件。

在这个 SCSS 文件中，我可以放置以下代码

$fa-font-path: jspm_resolve("font-awesome/fonts/"); 
@import "jspm:font-awesome/scss/font-awesome";

gulp 文件中的行:

gulp.src('src/scss/*.scss')

然后可以找到这个单个 SCSS 文件，并从那里找出如何通过 JSPM_Package 文件夹结构导入 Font-Awesome 的所有 SCSS 文件。然后将一个主 CSS 文件放置在目标目录中，其中包含来自 font-awesome 的 css。

在我使用 ASP.NET Core 的情况下，它看起来像这样:

.pipe(gulp.dest('./wwwroot/css'));

函数行需要设置为jspm_packages

functions: sassJspm.resolve_function('/jspm_packages/'),

我不确定他们为什么在文档中将其作为 lib - 也许这是旧的 JSPM 配置？