Node-sass不理解代字号

Question

探索angular-cli最近发布的Angular2的RC1我遇到了一个奇怪的问题: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理解~？

PS我使用WebStorm,它也喜欢使用它~.如果省略波浪号,则会导致解析路径无法解决.经过一些谷歌搜索后,我发现使用没有代字号的代码是遗留的,~应该用作最佳实践.这样对吗？

Answer 1

Tilde路径解析是webpack所做的事情,node-sass没有内置这样的解析器.用于webpack的sass-loader就是这样.您可以选择编写自己的导入分辨率.

为了完整起见,如果没有使用自定义导入程序的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"
  }
}