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

Question

我正在努力了解这个 sass 进口商： https://github.com/idcware/node-sass-jspm-importer

我不确定我是否在尝试正确使用它。

我正在尝试使用它来导入超棒字体的示例。 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')

当 SASS/SCSS 文件要从 JSPM 包中导入时，此路径有何意义，其路径如下：

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 您可以使用导入指令。因此，与其导入许多生成的 css 文件，不如让 SASS compiler/importer 生成一个 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 的 css。

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

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

函数行需要设置为jspm_packages

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

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

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

Usage of node-sass-jspm-importer paths configuration

sass

node.js

gulp

jspm