Bootstrap Sass not recognized

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?) Running in docker on ElementaryOS (Latest)
2. Versions. Please run ng --version. If there’s nothing outputted, please run in a Terminal: node --version and paste the result here: angular-cli: 1.0.0-beta.11-webpack.2 node: 5.12.0 os: linux x64
3. Repro steps. Was this an app that wasn’t created using the CLI? What change did you do on your code? etc. Just upgraded to rc5.
4. The log given by the failure. Normally this include a stack trace and some more information. None
5. Mention any other details that might be useful.

I want to use the bootstrap-sass repo from npm, but webpack is not recognizing it. I read about a bootstrap-sass-loader for webpack, but I can’t find the webpack config file. Anyway I can add/edit loaders etc.

[jurienhamaker]

Still doesn’t really solve the problem, as importing bootstrap from it’s npm package, can also include overriding variables just for that specific component… Or using variables like the default padding to keep up with code styling throughout your application etc.

Global styles do not solve a sass import…

example: component.scss:

@import "../../styles/bootstrap/bootstrap/variables";

I now have to import it from the downloaded source file, which I have to manually update. Instead of using the npm package.

It doesn’t really matter if angular-cli has global styles, it matters that it recognizes npm sass packages.

More information https://github.com/jtangelder/sass-loader

PS. I tried the ~ method in the sass-loader, still doesn’t work with angular-cli

[filipesilva]

Components in Angular 2 have their css encapsulated, which means that they don’t bleed out onto other parts of your app. Unfortunately, it also means that you can’t really import bootstrap in your component.

We added global styles to address this: https://github.com/angular/angular-cli#global-styles. It should be available in the next webpack release.