Meaning of ~ in import of scss files

Question

I have a npm library that I use for styling which uses the following syntax to import scss files. I am not sure what this means and could not find any documentation online. I use grunt with webpack during my build process.

@import '~bourbon/app/assets/stylesheets/bourbon';
@import '~bourbon-neat';

Answer 1

From documentation on a sass-loader#imports project,

webpack provides an advanced mechanism to resolve files. The sass-loader uses node-sass' custom importer feature to pass all queries to the webpack resolving engine. Thus you can import your Sass modules from node_modules. Just prepend them with a ~ to tell webpack that this is not a relative import

So if you have a file named foo.css and a module foo then you would use ~ if you want to include the module.