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（＆＃39; SRC / SASS / * SCSS＆＃39）

当从JSPM包中导入SASS / SCSS文件时，这条路径是如何理解的，这些路径包含以下路径：

jspm_packages/npm/font-aweesome@4.6.3/scss

本节中的lib文件夹

函数：sassJspm.resolve_function（＆＃39; / lib /＆＃39;），

这应该是/ jspm_packages /，因为在它指定的文档中

其中/ lib /是文档中jspm_packages文件夹的路径根

在哪种情况下，为什么他们不只是指定jspm_packages？

Answer 1

我在想这一切都错了。我缺少的一件事是，使用SASS / SCSS，您可以使用import指令。因此，不要导入许多生成的css文件，让SASS编译器/导入器生成一个单独的CSS文件更有意义。

所以我创建了一个SCSS文件，该文件位于src中名为SCSS的JSPM_Packages文件夹之外。

在这个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配置？

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

1 个答案: