Question

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

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，它也更喜欢使用~。如果省略波浪号，则会导致解析路径无法解决。在一些谷歌搜索后，我发现使用没有代字号的代码是遗留的，~应该被用作最佳实践。这样对吗？

Answer 1

Tilde路径解析是webpack所做的事情，node-sass没有内置这样的解析器。对于webpack，sass-loader就是这样。你也可以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 };
}

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

Node-sass不理解代字号

2 个答案: