Bootstrap Sass not recognized

[jurienhamaker]

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 nothing?

[filipesilva]

Can you add repro steps to see the errors you are getting?

[jurienhamaker]

1. create a new project.
2. npm install --save bootstrap-sass
3. try to do @import 'bootstrap'; in component scss file.

[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.

[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

[jurienhamaker]

Long story short;
I am missing the ability to add custom loaders to webpack through angular-cli

@filipesilva

[filipesilva]

I'm a bit confused here.. we do support sass/less/styl, see https://github.com/angular/angular-cli#css-preprocessor-integration.

Doesn't your scenario work by defining your variable overrides in src/_variables.sass, your global (app wide) styles in src/styles.sass, and importing your variable overrides in src/styles.sass plus in your components?

Regarding custom loader, this is the relevant issue: #1656

[zoiverd]

@filipesilva, this can resolve all the problems but If I import the variable files in multiple "app/my-component.component.scss" files, webpack still recognize as single variable file?

[filipesilva]

As far as I know, yes.

[ahmed-musallam]

Angular cli uses sass-loader, look closely in the docs, you'll see you need to use "~" before your npm package sass file name.. https://github.com/jtangelder/sass-loader

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}