Loading only what you need in bootstrap

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [X] feature request

Versions.

@angular/cli: 1.3.0 node: 8.3.0 os: win32 x64

Repro steps.

npm install bootstrap-loader npm install --save-dev bootstrap@v4.0.0-alpha.6

Node SASS & other loaders needed to handle styles npm install --save-dev css-loader node-sass resolve-url-loader sass-loader style-loader url-loader npm install --save-dev imports-loader exports-loader postcss-loader

The log given by the failure.

ERROR in C:/Data/programs/angular-cli/src/main.ts (11,1): Cannot find name 'require'.
ERROR in C:/Data/programs/angular-cli/src/main.ts (11,1): Cannot find name 'require'.
ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?sourceMap!./node_modules/bootstrap-loader/l
ib/bootstrap.styles.loader.js?{"bootstrapVersion":4,"useFlexbox":false,"extractStyles":false,"styleLoaders":["style","css","postcss","sass"],"styles":["mixins","normalize","print","button
s","code","forms","grid","images","carousel","modal","popover","tooltip","utilities"],"scripts":[],"configFilePath":"C://Data//programs//angular-cli//.bootstraprc","bootstrapPath":"C://Da
ta//programs//angular-cli//node_modules//bootstrap","bootstrapRelPath":"..//bootstrap"}!./node_modules/bootstrap-loader/no-op.js
Module build failed: Error: No PostCSS Config found in: C:\Data\programs\angular-cli\node_modules\bootstrap-loader
    at C:\Data\programs\angular-cli\node_modules\postcss-load-config\index.js:51:26
    at <anonymous>
 @ ./node_modules/style-loader!./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?sourceMap!./node_modu
les/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":4,"useFlexbox":false,"extractStyles":false,"styleLoaders":["style","css","postcss","sass"],"styles":["mixins","norm
alize","print","buttons","code","forms","grid","images","carousel","modal","popover","tooltip","utilities"],"scripts":[],"configFilePath":"C://Data//programs//angular-cli//.bootstraprc","
bootstrapPath":"C://Data//programs//angular-cli//node_modules//bootstrap","bootstrapRelPath":"..//bootstrap"}!./node_modules/bootstrap-loader/no-op.js 4:14-704
 @ ./node_modules/bootstrap-loader/lib/bootstrap.loader.js!./node_modules/bootstrap-loader/no-op.js
 @ ./node_modules/bootstrap-loader/loader.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

Desired functionality.

I´m trying to load just what I need in Bootstrap 4 and using the bootstrap-loader

Mention any other details that might be useful.

bootstrap-loader

[JSMike]

in src/styles.scss

@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/utilities/flex';
@import '~bootstrap/scss/bootstrap-grid';
@import '~bootstrap/scss/card';
...

I’d look at ngx-bootstrap or ng-bootstrap for adding JavaScript functionality, I wouldn’t suggest adding jQuery to an Angular project. There are plenty of articles out there on how to, but just don’t do it.

[JSMike]

fyi, look at node_modules/bootstrap/scss/bootstrap.scss to see the order in which the sass files are pulled in, so you get all of the variables in the right order.