4

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.

user3174133
  • 181
  • 1
  • 2
  • 8

1 Answers1

10

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";

Mukesh Nagar
  • 101
  • 4
  • I'm not sure if ```@import "../node_modules/bootswatch/dist/materia/bootstrap.min.css";``` is required – Mosby42 Apr 22 '18 at 18:20
  • materia/bootstrap.min.css is not the same as the vanilla bootstrap.min.css, I would include it. – devRyan Aug 19 '19 at 23:56