Menu
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';
921
Sass Importing FilesThe @import directive allows you to include the content of one file in another. The CSS @import directive has a major drawback due to performance issues; it creates an extra HTTP request each time you call it.
scss files, Sass can import plain old . css files.
What is an SCSS file? SCSS is the second syntax of Sass (Syntactically Awesome Stylesheet) that uses brackets instead of indentations. SCSS was designed in such a way that a valid CSS3 file is also a valid SCSS file. SCSS files are stored with the . scss extension.
SASS/SCSS is a CSS preprocessor that runs on the server and compiles to CSS code that your browser understands. There are client-side alternatives to SASS that can be compiled in the browser using javascript such as LESS CSS, though I advise you compile to CSS for production use.
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.
149
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
