Node-sass does not understand tilde
I just had to install the node-sass-tilde-importer package:
npm install node-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 relevant 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"
}
}
Tilde path resolving is something that webpack does, node-sass doesn't have such a resolver built in. sass-loader for webpack has this. You can write your own import resolution alternatively.
Just for completeness here's how you might 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 };
}