Node.js 节点sass不理解tilde

探索最近发布的Angular2的RC1的

angular cli

，我遇到了一个奇怪的问题：

angular cli

中的sass插件中的

节点sass

在包名抛出以下错误之前未解析

~

：

它发生在编译以下代码的过程中：

如果我去掉瓷砖，一切都会好的。这是正确的行为，还是存在使

节点sass

理解

~

的路径

---

p.S.我使用WebStorm，它也更喜欢使用

~

。如果忽略了tilde，则会导致无法解析路径。在谷歌搜索之后，我发现使用不带tilde的代码是一种传统，应该将

~

作为最佳实践。是这样吗

平铺路径解析是webpack所做的事情，node sass没有内置这样的解析程序。因为webpack有这个。你也可以选择

为了完整起见，这里介绍了在不使用webpack/sass加载程序的情况下，如何使用自定义导入程序：

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

  return { file: url };
}

---

我只需安装node sass tilde导入程序包：

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

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

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

以下是my 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"
  }
}

---

Tilde路径解析是webpack所做的事情，node sass没有内置这样的解析程序。用于webpack的sass加载程序具有此功能，但没有使用奇怪的

@

符号。您可以编写自己的导入解析-@DominicTobias，谢谢，它可以工作。你能把它写下来作为答案吗？关于

@

-符号-它是npm包名称的一部分，分为单独下载的部分。例如，

angular2

包被拆分为

@angular/core

，

@angular/http

等。就节点sass而言，它只是文件夹名称的一部分。啊，我明白了-当然，谢谢您是否需要添加一个检查以确保URL中的第二个字符不是正斜杠，以避免处理以

~/file

开头的URL？所以也许<代码>如果（url[0]=='~'&&url[1]！=='/'）正确。我想这取决于您使用节点Sass的环境。我的理解是WebPACK，角CLI和其他人使用“~/”来引用App root……所以可能是创建进口商时要考虑的事情。FWIW对未来的谷歌用户来说，sass加载器似乎确实在检查它们的实现中是否有“/”：我在这里遗漏了一些东西，我应该把这个函数放在哪里？这有助于我更好地理解节点sass导入器的特性。谢谢@如果您正在调用

sass.render（{…}）

您可以将其作为选项添加到那里。否则，如果从命令行或包脚本调用

节点sass

，则可以添加选项

--importer node sass.importer.js

，并使用导出函数的文件：

const path=require（'path'）；module.exports=function（url，prev，done）{…}

安装命令中有输入错误，但我无法编辑它，因为编辑必须至少包含6个字符（dumb！），并且它缺少一个“n”

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

{

  [...]

  "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"
  }
}