Angular-cli: Loading only what you need in bootstrap

[kjartanvalur]

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 [email protected]

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]

Cannot find name 'require'.

Add "node" to your src/tsconfig.app.json under compilerOptions.types

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": [
      "node"
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

[JSMike]

Also, this is a webpack configuration thing, did you run ng eject to do this?

Is there a reason for using bootstrap-loader? You can include those individual parts via sass/javascript

[kjartanvalur]

@JSMike Thanks.
Can you please explain how you can do this via sass/javascript ?

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

[kjartanvalur]

@JSMike thanks!

[angular-automatic-lock-bot[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._}