Skip to content

Guide to Importing Style Sheets

Jump to bottom
yogeshgadge edited this page Jul 14, 2017 · 2 revisions

Guide to Importing Style Sheets

You can use cbp-theme.css to get everything from the cbp-theme by directly including in your markup or importing in your build system.

Those who may need selective styles / want to extend styles e.g. using _variables you may import selective SCSS files which is described below.

Importing SCSS

cbp-theme provides importing style sheets just like other libraries e.g. bootstrap-sass, font-awesome etc.

npm install cbp-theme --save gets you cbp-theme and all the scss files in your project's ./npm_modules/cbp-theme/dist/scss.

SCSS files can be imported straight from cbp-theme npm module.

Users of webpack

Add the following in webpack.config.json

    sassLoader: {
          includePaths: [path.resolve(__dirname, './node_modules')]
    }

Then import artifacts as shown in the examples below.

    import '~cbp-theme/dist/scss/custom/variables';
    import '~cbp-theme/dist/scss/vendor/fontawesome';
    import '~cbp-theme/dist/scss/vendor/roboto';

Direct users of node-scss

Use --include-path=node_modules command line.

Then import artifacts as shown in the examples below.

    $fa-font-path: "font-awesome/fonts"; //please see note [1] as to why you have to override
    import '~cbp-theme/dist/scss/vendor/fontawesome';
    $roboto-font-path: 'roboto-fontface/fonts'; //please see note [1] as to why you have to override
    import '~cbp-theme/dist/scss/vendor/roboto';

[1] This may be due to these related open issues like sass/node-sass: Relative url paths and sass/libsass: Feature: Curate / normalize asset path in sass/node-sass and sass/libsass for url assets that the webpack defaults don't work for the non-webpack projects.

Clone this wiki locally