Skip to main content

Styling

CSS Modules#

This boilerplate is configured to use css-modules out of the box.

All .css file extensions will use css-modules unless it has .global.css.

If you need global styles, stylesheets with .global.css will not go through the css-modules loader. e.g. app.global.css

If you want to import global css libraries (like bootstrap), you can just write the following code in .global.css:

@import "~bootstrap/dist/css/bootstrap.css";

Importing CSS#

Say, you want to import css file from font-awesome module. Use following syntax

@import "~font-awesome/css/font-awesome.css";

Note the tilde ~ placed before module name.

Similar syntax is used for SCSS too.

Examples#

Further Readings#

Using SCSS#

Use following example project to learn how to migrate from CSS to SCSS

Further Readings#

Where to put images#

./src/img is the recommended folder.

Do not use resources folder. It is actually intended for build assets.

Example#

Further Readings#