How do you use a Bootswatch theme in Angular 5

Question

I am trying to use a Bootswatch theme in an Angular 5 project. I am using both Bootswatch and Bootstrap versions 4.0.0-beta-2. I have installed both via npm and have imported the _variables.scss and _bootswatch.scss in my styles.scss using the usual angular-cli/webpack conventions in my main styles.scss. I also import the relevant theme bootstrap.min.css into this file, and I add it to the styles[] array in angular.cli.json.

During build I get:

@include box-shadow(none);
        ^
     No mixin named box-shadow

and a broken build.

Answer 1

You are working with angular 4-5. so npm install bootswatch and attach the related libraries in style.scss file as described.

You are not including the libraries in order. Try importing it like this.

@import "../node_modules/bootswatch/dist/materia/variables"; @import "../node_modules/bootstrap/scss/bootstrap"; @import "../node_modules/bootswatch/dist/materia/bootswatch"; @import "../node_modules/bootswatch/dist/materia/bootstrap.min.css";