Node-sass 不理解波浪号答案

【问题标题】：Node-sass does not understand tildeNode-sass 不理解波浪号
【发布时间】：2016-09-03 12:36:21
【问题描述】：

探索最近发布的Angular2的RC1的angular-cli我遇到了一个奇怪的问题：angular-cli中的sass插件中的node-sass在包名之前没有解析~，抛出以下错误：

Error: File to import not found or unreadable: ~@angular2-material/core/style/theme-functions

在编译以下代码时发生：

@import "~@angular2-material/core/style/theme-functions";

如果我删除波浪号，一切都会好起来的。这是正确的行为，还是有办法让node-sass 理解~？

P.S. 我使用 WebStorm，它也更喜欢使用 ~。如果省略波浪号，则会抱怨无法解析路径。经过一番谷歌搜索后，我发现使用不带波浪号的代码是遗留问题，应该使用~ 作为最佳实践。这样对吗？

【问题讨论】：

波浪线路径解析是 webpack 所做的，node-sass 没有内置这样的解析器。用于 webpack 的 sass-loader 有这个，但没有那个奇怪的 @ 符号。不过，您可以编写自己的导入解决方案 - github.com/sass/node-sass#importer--v200---experimental
@DominicTobias，谢谢，它有效。你能把它写成答案吗？关于@-symbol - 它是 npm 包名称的一部分，拆分为单独下载的部分。例如。 angular2 包被拆分为 @angular/core、@angular/http 等。就 node-sass 而言，它只是文件夹名称的一部分。
啊，我明白了——当然，谢谢

标签： node.js angular sass

【解决方案1】：

波浪号路径解析是 webpack 所做的，node-sass 没有内置这样的解析器。sass-loader for webpack 有这个。您也可以write your own import resolution。

为了完整起见，以下是在没有 webpack/sass-loader 的情况下使用自定义导入器的方法：

function importer(url, prev, done) {
  if (url[0] === '~') {
    url = path.resolve('node_modules', url.substr(1));
  }

  return { file: url };
}

【讨论】：

您是否需要添加检查以确保 URL 中的第二个字符不是正斜杠以避免处理以 ~/file 开头的 URL？所以也许...if (url[0] === '~' && url[1] !== '/')?
正确。我想这取决于您使用 Node-Sass 的环境。我的理解是 webpack、Angular CLI 和其他人正在使用“~/”来引用应用程序根......所以可能只是在创建导入器时需要考虑的事情。 FWIW 对未来的 Google 员工来说，sass-loader 似乎确实在他们的实现中检查了“/”：github.com/webpack-contrib/sass-loader#imports
我在这里遗漏了一些东西，我应该把这个函数放在哪里？
帮助我理解了 node-sass 导入器功能。谢谢！
@azerafati 如果您拨打sass.render({...})，您可以将其添加为选项。否则，如果您从命令行或包脚本调用 node-sass，您可以添加选项 --importer node-sass.importer.js 以及导出函数的文件：const path = require('path'); module.exports = function(url, prev, done) {...}

【解决方案2】：

我只需要安装 node-sass-tilde-importer 包：

npm install node-sass-tilde-importer --save

然后将我的 scss 脚本更改为：

node-sass --watch style.scss --importer=node_modules/node-sass-tilde-importer style.css

以下是我的 package.json 文件的一些相关部分：

{

  [...]

  "scripts": {
    "scss": "node-sass --watch style.scss --importer=node_modules/node-sass-tilde-importer style.css"
  },

  "dependencies": {
    "bootstrap": "^4.3.1",
    "bootstrap-material-design": "^4.1.2",
    "node-sass": "^4.12.0",
    "node-sass-tilde-importer": "^1.0.2"
  }
}

【讨论】：

安装命令中有错字，但我无法编辑它，因为编辑必须至少有 6 个字符（愚蠢！）而且它只是缺少一个 'n'