Node -ass doesn't understand tilde

Question

angular-cli recently released angular-cli for RC1, I came across an obscure problem: the node-sass inside the sass plugin in angular-cli does not parse ~ before the package name throws the following error:

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

This happens when compiling the following code:

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

If I remove the tilde, everything will be all right. The correct behavior, or is there a way to make node-sass understandable ~ ?

PS I use WebStorm and he prefers to use ~ too. If the tilde is omitted, she complains of an inability to resolve the path. And after some search queries, I found that using code without a tilde is a legacy, and ~ should be used as best practice. It is right?

Answer 1

The Tilde resolution solution is what webpack does, node-sass does not have such a built-in resolver. sass-loader for webpack has this. You can write your own import authorization as an alternative.

Just for completeness, here's how you can do it without webpack / sass-loader using a custom importer:

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

Answer 2

I just needed to install the node-sass-tilde-importer package:

 npm install ode-sass-tilde-importer --save 

And then change my scss script to:

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

Here are some important parts of my package.json file:

 { [...] "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" } }