导入以波浪号开头的 node_modules 的 Gulp sass 问题答案

【问题标题】：Gulp sass issue with importing node_modules that start with tilde导入以波浪号开头的 node_modules 的 Gulp sass 问题
【发布时间】：2017-10-19 13:20:56
【问题描述】：

我正在通过 gulp sass 任务将 .scss 文件转换为 .css。问题是基础 .scss 文件包含包含其他导入的导入。这些导入以

开头

~@angular/material/core/etc/etc

波浪号导致以下错误：

events.js:160
  throw er; // Unhandled 'error' event
  ^
Error: node_modules\@covalent\core\chips\_chips-theme.scss
Error: File to import not found or unreadable: ~@angular/material/core/theming/theming.
Parent style sheet: C:/Users/laurensk/Documents/Playground/node_modules/@covalent/core/chips/_chips-theme.scss
    on line 1 of node_modules/@covalent/core/chips/_chips-theme.scss
>> @import '~@angular/material/core/theming/theming';
   ^

有一个名为 node-sass-tilde-importer 的自定义导入器，但我不确定是否可以在我的 gulp sass 任务中实现它。

我的代码：

var gulp = require("gulp"),
sass = require("gulp-sass");
//var replace = require('gulp-replace');
//var sassGlob = require('gulp-sass-glob');
//var tildeImporter = require('node-sass-tilde-importer');

gulp.task("sass", function () {
  return gulp
    .src('Styles/theme.scss')
    .pipe(sass())
    .pipe(gulp.dest('wwwroot/dist'));
});

我尝试用 './node_modules' 替换 '~' 但它会抛出相同的错误。

任何意见将不胜感激！

【问题讨论】：

标签： sass gulp

【解决方案1】：

gulp-sass 接受所有 node-sass 属性。所以你只需要使用node-sass-tilde-importer 导入器配置gulp-sass：

var gulp = require("gulp"),
sass = require("gulp-sass");
var tildeImporter = require('node-sass-tilde-importer');

gulp.task("sass", function () {
 return gulp
  .src('Styles/theme.scss')
  .pipe(sass({
      importer: tildeImporter
   }))
  .pipe(gulp.dest('wwwroot/dist'));
 });

【讨论】：