Guide "How to use Bootstrap 4 and Sass (and jQuery)" is deprecated #1156

Andrey-Pavlov · 2016-11-06T13:31:24Z

This guide is deprecated https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-use-Bootstrap-4-and-Sass-(and-jQuery)

kjartanvalur · 2016-11-06T14:49:23Z

@Andrey-Pavlov I´m currentry struggling to do this right... Can you please share some guidance?

kjartanvalur · 2016-11-06T14:55:56Z

And I dont need any jquery dependancy

Andrey-Pavlov · 2016-11-06T15:35:19Z

@kjartanvalur Sure, but without jquery not all bootstrap features will be available.

npm i --save-dev bootstrap@alpha.5 bootstrap-loader tether jquery (but it's optional)
webpack.common.js

after new LoaderOptionsPlugin({}) add:

 new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
        Tether: "tether",
        "window.Tether": "tether",
        Tooltip: "exports?Tooltip!bootstrap/js/dist/tooltip",
        Alert: "exports?Alert!bootstrap/js/dist/alert",
        Button: "exports?Button!bootstrap/js/dist/button",
        Carousel: "exports?Carousel!bootstrap/js/dist/carousel",
        Collapse: "exports?Collapse!bootstrap/js/dist/collapse",
        Dropdown: "exports?Dropdown!bootstrap/js/dist/dropdown",
        Modal: "exports?Modal!bootstrap/js/dist/modal",
        Popover: "exports?Popover!bootstrap/js/dist/popover",
        Scrollspy: "exports?Scrollspy!bootstrap/js/dist/scrollspy",
        Tab: "exports?Tab!bootstrap/js/dist/tab",
        Util: "exports?Util!bootstrap/js/dist/util"
      })

Add loaders for sass under (npm i --save-dev sass-loader) and all UNMEET DEPENDENCIES

        {
          test: /\.css$/,
          loaders: ['to-string-loader', 'css-loader']
        },

        {
          test: /\.scss$/,
          loaders: ['to-string-loader', 'css-loader', 'sass-loader']
        },

vendor.ts

import 'bootstrap-loader';
import 'jquery';

Frequently errors:

resolve-url-loader, 'path' of undefined
Path must be a string. Received undefined

You need to add next rows to LoaderOptionPlugin
context: helpers.root(),
output: { path: helpers.root('dist') },

  /**
       * Plugin LoaderOptionsPlugin (experimental)
       *
       * See: https://gist.github.com/sokra/27b24881210b56bbaff7
       */
      new LoaderOptionsPlugin({
        debug: true,
        options: {
           context: helpers.root(),
          output: {
              path: helpers.root('dist')
          },
          /**
           * Static analysis linter for TypeScript advanced options configuration
           * Description: An extensible linter for the TypeScript language.
           *
           * See: https://github.com/wbuchwalter/tslint-loader
           */
          tslint: {
            emitErrors: false,
            failOnHint: false,
            resourcePath: 'src'
          }
        }
      })
    ],

Spend 6 hours to resolve that 2 issues. :(
shakacode/bootstrap-loader#191

sky-coding · 2016-11-07T04:08:05Z

@Andrey-Pavlov thank you so much for doing the leg-work on this.

Updating webpack.common.js's LoaderOptionsPlugin was ineffective for me, I also had to update webpack.dev.js's LoaderOptionsPlugin for dev, and I'm assuming the prod config as well.

kjartanvalur · 2016-11-07T14:49:00Z

Well done @Andrey-Pavlov 👍

byhoratiss · 2016-11-11T14:58:10Z

I've managed to get rid of the issue by following @Andrey-Pavlov steps, but when using the npm run server:dev command I get: (sorry for the long dump)

ERROR in ./~/bootstrap-loader/lib/bootstrap.scripts.loader.js?{"bootstrapVersion":4,"useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":["style","css","sass"],"styles":["mixins","normalize","print","glyphicons","scaffolding","type","code","grid","tables","forms","buttons","component-animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs","pagination","pager","labels","badges","jumbotron","thumbnails","alerts","progress-bars","media","list-group","panels","wells","responsive-embed","close","modals","tooltip","popovers","carousel","utilities","responsive-utilities"],"scripts":["transition","alert","button","carousel","collapse","dropdown","modal","tooltip","popover","scrollspy","tab","affix"],"configFilePath":"/home/horacio/Sites/angular2-webpack-starter/.bootstraprc","bootstrapPath":"/home/horacio/Sites/angular2-webpack-starter/~/bootstrap","bootstrapRelPath":"../bootstrap"}!./~/bootstrap-loader/no-op.js
Module not found: Error: Can't resolve '../bootstrap/js/dist/transition' in '/home/horacio/Sites/angular2-webpack-starter/node_modules/bootstrap-loader'
 @ ./~/bootstrap-loader/lib/bootstrap.scripts.loader.js?{"bootstrapVersion":4,"useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":["style","css","sass"],"styles":["mixins","normalize","print","glyphicons","scaffolding","type","code","grid","tables","forms","buttons","component-animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs","pagination","pager","labels","badges","jumbotron","thumbnails","alerts","progress-bars","media","list-group","panels","wells","responsive-embed","close","modals","tooltip","popovers","carousel","utilities","responsive-utilities"],"scripts":["transition","alert","button","carousel","collapse","dropdown","modal","tooltip","popover","scrollspy","tab","affix"],"configFilePath":"/home/horacio/Sites/angular2-webpack-starter/.bootstraprc","bootstrapPath":"/home/horacio/Sites/angular2-webpack-starter/~/bootstrap","bootstrapRelPath":"../bootstrap"}!./~/bootstrap-loader/no-op.js 1:0-43
 @ ./~/bootstrap-loader/lib/bootstrap.loader.js!./~/bootstrap-loader/no-op.js
 @ ./~/bootstrap-loader/loader.js
 @ ./src/vendor.browser.ts
 @ multi vendor

ERROR in ./~/bootstrap-loader/lib/bootstrap.scripts.loader.js?{"bootstrapVersion":4,"useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":["style","css","sass"],"styles":["mixins","normalize","print","glyphicons","scaffolding","type","code","grid","tables","forms","buttons","component-animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs","pagination","pager","labels","badges","jumbotron","thumbnails","alerts","progress-bars","media","list-group","panels","wells","responsive-embed","close","modals","tooltip","popovers","carousel","utilities","responsive-utilities"],"scripts":["transition","alert","button","carousel","collapse","dropdown","modal","tooltip","popover","scrollspy","tab","affix"],"configFilePath":"/home/horacio/Sites/angular2-webpack-starter/.bootstraprc","bootstrapPath":"/home/horacio/Sites/angular2-webpack-starter/~/bootstrap","bootstrapRelPath":"../bootstrap"}!./~/bootstrap-loader/no-op.js
Module not found: Error: Can't resolve '../bootstrap/js/dist/affix' in '/home/horacio/Sites/angular2-webpack-starter/node_modules/bootstrap-loader'
 @ ./~/bootstrap-loader/lib/bootstrap.scripts.loader.js?{"bootstrapVersion":4,"useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":["style","css","sass"],"styles":["mixins","normalize","print","glyphicons","scaffolding","type","code","grid","tables","forms","buttons","component-animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs","pagination","pager","labels","badges","jumbotron","thumbnails","alerts","progress-bars","media","list-group","panels","wells","responsive-embed","close","modals","tooltip","popovers","carousel","utilities","responsive-utilities"],"scripts":["transition","alert","button","carousel","collapse","dropdown","modal","tooltip","popover","scrollspy","tab","affix"],"configFilePath":"/home/horacio/Sites/angular2-webpack-starter/.bootstraprc","bootstrapPath":"/home/horacio/Sites/angular2-webpack-starter/~/bootstrap","bootstrapRelPath":"../bootstrap"}!./~/bootstrap-loader/no-op.js 12:0-38
 @ ./~/bootstrap-loader/lib/bootstrap.loader.js!./~/bootstrap-loader/no-op.js
 @ ./~/bootstrap-loader/loader.js
 @ ./src/vendor.browser.ts
 @ multi vendor

ERROR in ./~/css-loader!./~/to-string-loader/src/to-string.js!./~/css-loader!./src/app/app.component.css
Module build failed: Unknown word (2:9)

  1 | 
> 2 |         var result = require("!!./../../node_modules/css-loader/index.js!./app.component.css");
    |         ^
  3 | 
  4 |         if (typeof result === "string") {
  5 |             module.exports = result;

 @ ./src/app/app.component.css 2:21-190
 @ ./src/app/app.component.ts
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.browser.ts
 @ multi main

ERROR in ./~/css-loader!./~/to-string-loader/src/to-string.js!./~/css-loader!./src/app/home/home.component.css
Module build failed: Unknown word (2:9)

  1 | 
> 2 |         var result = require("!!./../../../node_modules/css-loader/index.js!./home.component.css");
    |         ^
  3 | 
  4 |         if (typeof result === "string") {
  5 |             module.exports = result;

 @ ./src/app/home/home.component.css 2:21-200
 @ ./src/app/home/home.component.ts
 @ ./src/app/home/index.ts
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.browser.ts
 @ multi main

ERROR in ./~/css-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./~/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":4,"useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":["style","css","sass"],"styles":["mixins","normalize","print","glyphicons","scaffolding","type","code","grid","tables","forms","buttons","component-animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs","pagination","pager","labels","badges","jumbotron","thumbnails","alerts","progress-bars","media","list-group","panels","wells","responsive-embed","close","modals","tooltip","popovers","carousel","utilities","responsive-utilities"],"scripts":["transition","alert","button","carousel","collapse","dropdown","modal","tooltip","popover","scrollspy","tab","affix"],"configFilePath":"/home/horacio/Sites/angular2-webpack-starter/.bootstraprc","bootstrapPath":"/home/horacio/Sites/angular2-webpack-starter/~/bootstrap","bootstrapRelPath":"../bootstrap"}!./~/bootstrap-loader/no-op.js
Module build failed: 
undefined
^
      File to import not found or unreadable: ../bootstrap/scss/_glyphicons
Parent style sheet: stdin
      in /home/horacio/Sites/angular2-webpack-starter/node_modules/bootstrap-loader/no-op.js (line 5, column 1)
 @ ./~/style-loader!./~/css-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./~/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":4,"useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":["style","css","sass"],"styles":["mixins","normalize","print","glyphicons","scaffolding","type","code","grid","tables","forms","buttons","component-animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs","pagination","pager","labels","badges","jumbotron","thumbnails","alerts","progress-bars","media","list-group","panels","wells","responsive-embed","close","modals","tooltip","popovers","carousel","utilities","responsive-utilities"],"scripts":["transition","alert","button","carousel","collapse","dropdown","modal","tooltip","popover","scrollspy","tab","affix"],"configFilePath":"/home/horacio/Sites/angular2-webpack-starter/.bootstraprc","bootstrapPath":"/home/horacio/Sites/angular2-webpack-starter/~/bootstrap","bootstrapRelPath":"../bootstrap"}!./~/bootstrap-loader/no-op.js 4:14-1174
 @ ./~/bootstrap-loader/lib/bootstrap.loader.js!./~/bootstrap-loader/no-op.js
 @ ./~/bootstrap-loader/loader.js
 @ ./src/vendor.browser.ts
 @ multi vendor

Any clues? I'm so lost!

ValentinFunk · 2016-11-22T19:02:57Z

@byhoratiss did you manage to fix it? I believe the first error can be fixed by going for 4.0.0-beta.4 for bootstrap but I still get

Module build failed: Unknown word (2:9)

  1 | 
> 2 |         var result = require("!!./../../node_modules/css-loader/index.js!./app.component.css");
    |         ^
  3 | 
  4 |         if (typeof result === "string") {
  5 |             module.exports = result;

 @ ./src/app/app.component.css 2:21-190
 @ ./src/app/app.component.ts
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.browser.ts
 @ multi main

ERROR in ./~/css-loader!./~/to-string-loader/src/to-string.js!./~/css-loader!./src/app/home/home.component.css
Module build failed: Unknown word (2:9)

  1 | 
> 2 |         var result = require("!!./../../../node_modules/css-loader/index.js!./home.component.css");
    |         ^
  3 | 
  4 |         if (typeof result === "string") {
  5 |             module.exports = result;

 @ ./src/app/home/home.component.css 2:21-200
 @ ./src/app/home/home.component.ts
 @ ./src/app/home/index.ts
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.browser.ts
 @ multi main

ERROR in ./~/css-loader!./~/postcss-loader!./~/resolve-url/resolve-url.js!./~/sass-loader?sourceMap!./~/bootstrap-loader/lib/bootstrap.styles.loader.js!./~/bootstrap-loader/no-op.js
Module build failed: ReferenceError: document is not defined
    at Object.resolveUrl (/home/valentin/angular2-webpack-starter/node_modules/resolve-url/resolve-url.js:21:16)
 @ ./~/style-loader!./~/css-loader!./~/postcss-loader!./~/resolve-url/resolve-url.js!./~/sass-loader?sourceMap!./~/bootstrap-loader/lib/bootstrap.styles.loader.js!./~/bootstrap-loader/no-op.js 4:14-192 13:2-17:4 14:20-198
 @ ./~/bootstrap-loader/lib/bootstrap.loader.js!./~/bootstrap-loader/no-op.js
 @ ./~/bootstrap-loader/loader.js
 @ ./src/vendor.browser.ts
 @ multi vendor

byhoratiss · 2016-11-22T19:32:04Z

No I couldn't. I tried a lot and desisted. 😩

El 22 nov. 2016 4:04 PM, "Valentin Funk" notifications@github.com
escribió:

@byhoratiss https://github.com/byhoratiss did you manage to fix it? I
believe the first error can be fixed by going for 4.0.0-beta.4 for
bootstrap but I still get

Module build failed: Unknown word (2:9)

1 |

2 | var result = require("!!./../../node_modules/css-loader/index.js!./app.component.css");
| ^
3 |
4 | if (typeof result === "string") {
5 | module.exports = result;

@ ./src/app/app.component.css 2:21-190
@ ./src/app/app.component.ts
@ ./src/app/app.module.ts
@ ./src/app/index.ts
@ ./src/main.browser.ts
@ multi main

ERROR in ./~~/css-loader!./~~/to-string-loader/src/to-string.js!./~/css-loader!./src/app/home/home.component.css
Module build failed: Unknown word (2:9)

1 |

2 | var result = require("!!./../../../node_modules/css-loader/index.js!./home.component.css");
| ^
3 |
4 | if (typeof result === "string") {
5 | module.exports = result;

@ ./src/app/home/home.component.css 2:21-200
@ ./src/app/home/home.component.ts
@ ./src/app/home/index.ts
@ ./src/app/app.module.ts
@ ./src/app/index.ts
@ ./src/main.browser.ts
@ multi main

ERROR in ./~~/css-loader!./~~/postcss-loader!./~~/resolve-url/resolve-url.js!./~~/sass-loader?sourceMap!./~~/bootstrap-loader/lib/bootstrap.styles.loader.js!./~~/bootstrap-loader/no-op.js
Module build failed: ReferenceError: document is not defined
at Object.resolveUrl (/home/valentin/angular2-webpack-starter/node_modules/resolve-url/resolve-url.js:21:16)
@ ./~~/style-loader!./~~/css-loader!./~~/postcss-loader!./~~/resolve-url/resolve-url.js!./~~/sass-loader?sourceMap!./~~/bootstrap-loader/lib/bootstrap.styles.loader.js!.//bootstrap-loader/no-op.js 4:14-192 13:2-17:4 14:20-198
@ .//bootstrap-loader/lib/bootstrap.loader.js!.//bootstrap-loader/no-op.js
@ .//bootstrap-loader/loader.js
@ ./src/vendor.browser.ts
@ multi vendor

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#1156 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAd3mHvPWf9pyaPQnfTrDcPySEPLBRnbks5rAzxzgaJpZM4KqjfV
.

balakonda · 2016-12-12T14:04:48Z

Too many issues with this already reported, and the guide is not useful. Please update soon.

Marcdup1 · 2016-12-26T14:25:14Z

Has anyone figured out the solution to this issue?

vadhavkar · 2017-01-19T04:04:18Z

In .bootstraprc add '-loader' suffix to all the webpack loaders in 'styleLoaders'.

# Webpack loaders, order matters
styleLoaders:
  - style-loader
  - css-loader
  - postcss-loader
  - sass-loader  #<--- Beginning with Webpack v2.1.0-beta.26, the '-loader' suffix is required for all loaders.

sebastianhaas · 2017-01-30T10:36:37Z

I updated the wiki page according to my setup. Took me hours to get this running finally.

DerZyklop · 2017-02-06T12:39:52Z

I fixed it for my setup with @vadhavkar‘s comment and changed @Andrey-Pavlov‘s example. I added -loader to all exports like this:

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery",
    Tether: "tether",
    "window.Tether": "tether",
    Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
    Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
    Button: "exports-loader?Button!bootstrap/js/dist/button",
    Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel",
    Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
    Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
    Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
    Popover: "exports-loader?Popover!bootstrap/js/dist/popover",
    Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy",
    Tab: "exports-loader?Tab!bootstrap/js/dist/tab",
    Util: "exports-loader?Util!bootstrap/js/dist/util"
})

maitham · 2017-06-01T22:44:14Z

anyone?

sheerlox · 2017-06-02T07:58:11Z

I personally recommend using ng-bootstrap, which integrate with Angular 2 nicely with directives, service and components !

The setup is easy:

npm install bootstrap@4.0.0-alpha.6 --save
Import the sass file into you app (import '../path/to/node_modules/bootstrap/scss/bootstrap.scss')
Import ng-bootstrap into your main module:

import { NgbModule } from '@ng-bootstrap/ng-bootstrap'

@NgModule({
  bootstrap: [ AppComponent ],
  declarations: [
    AppComponent,
  ],
  imports: [
    NgbModule.forRoot()
  ],
  providers: [
  ]
})
export class AppModule {
}

roski mentioned this issue Nov 14, 2016

How to include Twitter Bootstrap 3 using webpack #696

Closed

PatrickJS closed this as completed Sep 2, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Guide "How to use Bootstrap 4 and Sass (and jQuery)" is deprecated #1156

Guide "How to use Bootstrap 4 and Sass (and jQuery)" is deprecated #1156

Andrey-Pavlov commented Nov 6, 2016

kjartanvalur commented Nov 6, 2016

kjartanvalur commented Nov 6, 2016

Andrey-Pavlov commented Nov 6, 2016 •

edited

Loading

sky-coding commented Nov 7, 2016 •

edited

Loading

kjartanvalur commented Nov 7, 2016

byhoratiss commented Nov 11, 2016

ValentinFunk commented Nov 22, 2016

byhoratiss commented Nov 22, 2016

balakonda commented Dec 12, 2016

Marcdup1 commented Dec 26, 2016

vadhavkar commented Jan 19, 2017 •

edited

Loading

sebastianhaas commented Jan 30, 2017

DerZyklop commented Feb 6, 2017

maitham commented Jun 1, 2017

sheerlox commented Jun 2, 2017

Guide "How to use Bootstrap 4 and Sass (and jQuery)" is deprecated #1156

Guide "How to use Bootstrap 4 and Sass (and jQuery)" is deprecated #1156

Comments

Andrey-Pavlov commented Nov 6, 2016

kjartanvalur commented Nov 6, 2016

kjartanvalur commented Nov 6, 2016

Andrey-Pavlov commented Nov 6, 2016 • edited Loading

sky-coding commented Nov 7, 2016 • edited Loading

kjartanvalur commented Nov 7, 2016

byhoratiss commented Nov 11, 2016

ValentinFunk commented Nov 22, 2016

byhoratiss commented Nov 22, 2016

balakonda commented Dec 12, 2016

Marcdup1 commented Dec 26, 2016

vadhavkar commented Jan 19, 2017 • edited Loading

sebastianhaas commented Jan 30, 2017

DerZyklop commented Feb 6, 2017

maitham commented Jun 1, 2017

sheerlox commented Jun 2, 2017

Andrey-Pavlov commented Nov 6, 2016 •

edited

Loading

sky-coding commented Nov 7, 2016 •

edited

Loading

vadhavkar commented Jan 19, 2017 •

edited

Loading