Bootstrap 4 beta 1 support
Ks89 opened this issue ยท 23 comments
Hi!
I updated to bootstrap@4.0.0-beta and now I've this error:
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/lib/bootstrap.styles.loader.js?{"bootstrapVersion":4,"useFlexbox":true,"extractStyles":false,"styleLoaders":["style","css","postcss","sass"],"styles":["mixins","normalize","print","reboot","type","images","code","grid","tables","forms","buttons","transitions","dropdown","button-group","input-group","custom-forms","nav","navbar","card","breadcrumb","pagination","jumbotron","alert","progress","media","list-group","responsive-embed","close","badge","modal","tooltip","popover","carousel","utilities"],"scripts":["alert","button","carousel","collapse","dropdown","modal","popover","scrollspy","tab","tooltip","util"],"configFilePath":"/Users/ks89/git/angular-webpack-skeleton/.bootstraprc","bootstrapPath":"/Users/ks89/git/angular-webpack-skeleton/node_modules/bootstrap","bootstrapRelPath":"../bootstrap"}!./node_modules/bootstrap-loader/no-op.js
Module build failed:
undefined
^
File to import not found or unreadable: ../bootstrap/scss/_normalize.
Parent style sheet: stdin
in /Users/ks89/git/angular-webpack-skeleton/node_modules/bootstrap-loader/no-op.js (line 4, column 1)
@ ./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_modules/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":4,"useFlexbox":true,"extractStyles":false,"styleLoaders":["style","css","postcss","sass"],"styles":["mixins","normalize","print","reboot","type","images","code","grid","tables","forms","buttons","transitions","dropdown","button-group","input-group","custom-forms","nav","navbar","card","breadcrumb","pagination","jumbotron","alert","progress","media","list-group","responsive-embed","close","badge","modal","tooltip","popover","carousel","utilities"],"scripts":["alert","button","carousel","collapse","dropdown","modal","popover","scrollspy","tab","tooltip","util"],"configFilePath":"/Users/ks89/git/angular-webpack-skeleton/.bootstraprc","bootstrapPath":"/Users/ks89/git/angular-webpack-skeleton/node_modules/bootstrap","bootstrapRelPath":"../bootstrap"}!./node_modules/bootstrap-loader/no-op.js 4:14-1092 18:2-22:4 19:20-1098
@ ./node_modules/bootstrap-loader/lib/bootstrap.loader.js!./node_modules/bootstrap-loader/no-op.js
@ ./node_modules/bootstrap-loader/loader.js
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.ts
Beta 1 dropped Normalize.css as a dependency
_normalize is not contained any more in bootstrap 4 beta. You need to remove this from your .bootstraprc.
Just take a look at the recent blog entry: http://blog.getbootstrap.com/2017/08/10/bootstrap-4-beta/
Forked Normalize.css and consolidated all our HTML resets into a new CSS module, Reboot. Normalize.css has taken a different path than weโd prefer, dropping some core CSS tweaks weโve long depended upon. Reboot takes the core of Normalize.css and expands it to include more opinionated resets like box-sizing: border-box, margin tweaks, and more all in a single Sass file.
I removed responsive-embed and normalize from .bootstraprc and now I have this error:
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/lib/bootstrap.styles.loader.js?{"bootstrapVersion":4,"useFlexbox":true,"extractStyles":false,"styleLoaders":["style","css","postcss","sass"],"styles":["mixins","print","reboot","type","images","code","grid","tables","forms","buttons","transitions","dropdown","button-group","input-group","custom-forms","nav","navbar","card","breadcrumb","pagination","jumbotron","alert","progress","media","list-group","close","badge","modal","tooltip","popover","carousel","utilities"],"scripts":["alert","button","carousel","collapse","dropdown","modal","popover","scrollspy","tab","tooltip","util"],"configFilePath":"/Users/ks89/git/angular-webpack-skeleton/.bootstraprc","bootstrapPath":"/Users/ks89/git/angular-webpack-skeleton/node_modules/bootstrap","bootstrapRelPath":"../bootstrap"}!./node_modules/bootstrap-loader/no-op.js
Module build failed:
$link-hover-color: darken($link-color, 15%) !default;
^
Argument `$color` of `darken($color, $amount)` must be a color
Backtrace:
node_modules/bootstrap/scss/_variables.scss:168, in function `darken`
node_modules/bootstrap/scss/_variables.scss:168
in /Users/ks89/git/angular-webpack-skeleton/node_modules/bootstrap/scss/_variables.scss (line 168, column 25)
@ ./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_modules/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":4,"useFlexbox":true,"extractStyles":false,"styleLoaders":["style","css","postcss","sass"],"styles":["mixins","print","reboot","type","images","code","grid","tables","forms","buttons","transitions","dropdown","button-group","input-group","custom-forms","nav","navbar","card","breadcrumb","pagination","jumbotron","alert","progress","media","list-group","close","badge","modal","tooltip","popover","carousel","utilities"],"scripts":["alert","button","carousel","collapse","dropdown","modal","popover","scrollspy","tab","tooltip","util"],"configFilePath":"/Users/ks89/git/angular-webpack-skeleton/.bootstraprc","bootstrapPath":"/Users/ks89/git/angular-webpack-skeleton/node_modules/bootstrap","bootstrapRelPath":"../bootstrap"}!./node_modules/bootstrap-loader/no-op.js 4:14-1057 18:2-22:4 19:20-1063
@ ./node_modules/bootstrap-loader/lib/bootstrap.loader.js!./node_modules/bootstrap-loader/no-op.js
@ ./node_modules/bootstrap-loader/loader.js
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.ts
adding this to the custom variables file fixed the issue for me:
@import "~bootstrap/scss/_functions.scss";
which "custom variables file"? A scss file inside your project, or _variables.scss inside bootstrap?
I was able to get 4 beta to work with the following:
- Set normalize: false and responsive-embed: false in my .bootstraprc
- Add @import "~bootstrap/scss/_functions.scss" to the top of my pre-customizations.scss file
Thank u guys, now It's working :)
I added . 'Popper': 'popper.js' into "ProvidePlugin({...})" in my webpack config.
I'm going to merge #125 soon. However, is there a good reason to support both the alpha and the beta with the update?
@justin808 I think that alphas should be removed. Now apis should be stable, so all previous alphas are useless.
Attention: to prevent this error
zone.js:195 Uncaught TypeError: Popper is not a constructor
at Dropdown.toggle (dropdown.js:145)
at HTMLButtonElement.<anonymous> (dropdown.js:270)
at Function.each (jquery.js:362)
at jQuery.fn.init.each (jquery.js:157)
at jQuery.fn.init._jQueryInterface [as dropdown] (dropdown.js:257)
at HTMLButtonElement.<anonymous> (dropdown.js:411)
at HTMLDocument.dispatch (jquery.js:5206)
at HTMLDocument.elemData.handle (jquery.js:5014)
at ZoneDelegate.webpackJsonpac__name_../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
at Zone.webpackJsonpac__name_../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:191)
at ZoneTask.webpackJsonpac__name_../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)
at invokeTask (zone.js:1370)
at HTMLDocument.globalZoneAwareCallback (zone.js:1388)
toggle @ dropdown.js:145
(anonymous) @ dropdown.js:270
each @ jquery.js:362
each @ jquery.js:157
_jQueryInterface @ dropdown.js:257
(anonymous) @ dropdown.js:411
dispatch @ jquery.js:5206
elemData.handle @ jquery.js:5014
webpackJsonpac__name_../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:424
webpackJsonpac__name_../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:191
webpackJsonpac__name_../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1370
globalZoneAwareCallback @ zone.js:1388
while using Popper with Webpack 3, import Popper in this way:
ProvidePlugin({
...,
Popper: ['popper.js', 'default'],
...
})
not simply with 'Popper': 'popper.js'
I hope that this could be useful for some people
None of this worked for me: setting normalize and responsive_embed to false, importing the functions.scss file and installing popper (and adding to webpack).
I'm using webpack 2 though
See: #316.
This is almost ready to go. I commented:
@ivankalinin Great work!
1. Let's remove all the beta parts. Alpha users should not upgrade.
2. Please update the CHANGELOG.md per prior entries for v2.2.0 and make any necessary changes in the README.md
3. Please confirm that you've tried all the examples in the examples directory and you've made the appropriate updates there so they are all on the beta and not the alpha.
Once the above 3 steps are done, I'll immediately create a new release for v2.2.0.
@jugg1es @Ks89 feel free to try to help @IvanKalinin getting this to the finish line.
After attempting all of the steps suggested, I was still getting:
Argument
$colorof
darken($color, $amount) must be a color
I don't have the full log because I just set bootstrap to be fixed at
"bootstrap": "4.0.0-alpha.6",
and moved on for now.
@jugg1es I created two templates with bootstrap-loader and bootstrap 4 beta. If you want you could check for differences.
Webpack 3: https://github.com/Ks89/angular-webpack-skeleton
angular-cli: https://github.com/Ks89/angular-cli-bootstraploader
I had the same issue with my angular-cli app. Using a diffrent version of node and npm fixed my issue. If it helps, try using NVM to switch to different versions of node.
Same issue here:
ERROR in ./~/css-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?sourceMap!./~/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":4,"extractStyles":false,"styleLoaders":["style-loader","css-loader","sass-loader"],"styles":["mixins","print","buttons","code","forms","grid","images","reboot","tables","type","alert","badge","breadcrumb","button-group","card","close","custom-forms","dropdown","input-group","jumbotron","list-group","media","nav","navbar","pagination","progress","responsive-embed","transitions","carousel","modal","popover","tooltip","utilities"],"scripts":false,"configFilePath":"/Users/glavin/Development/unibeautify/assistant/.bootstraprc","bootstrapPath":"/Users/glavin/Development/unibeautify/assistant/~/bootstrap","bootstrapRelPath":"../bootstrap"}!./~/source-map-loader!./~/source-map-loader!./~/bootstrap-loader/no-op.js
Module build failed:
undefined
^
File to import not found or unreadable: ../bootstrap/scss/_responsive-embed.
Parent style sheet: stdin
in /Users/glavin/Development/unibeautify/assistant/node_modules/bootstrap-loader/no-op.js (line 29, column 1)
@ ./~/style-loader!./~/css-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?sourceMap!./~/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":4,"extractStyles":false,"styleLoaders":["style-loader","css-loader","sass-loader"],"styles":["mixins","print","buttons","code","forms","grid","images","reboot","tables","type","alert","badge","breadcrumb","button-group","card","close","custom-forms","dropdown","input-group","jumbotron","list-group","media","nav","navbar","pagination","progress","responsive-embed","transitions","carousel","modal","popover","tooltip","utilities"],"scripts":false,"configFilePath":"/Users/glavin/Development/unibeautify/assistant/.bootstraprc","bootstrapPath":"/Users/glavin/Development/unibeautify/assistant/~/bootstrap","bootstrapRelPath":"../bootstrap"}!./~/source-map-loader!./~/bootstrap-loader/no-op.js 4:14-989 18:2-22:4 19:20-995
@ ./~/bootstrap-loader/lib/bootstrap.loader.js!./~/bootstrap-loader/no-op.js
@ ./~/bootstrap-loader/loader.js
@ multi react-hot-loader/patch bootstrap-loader ./src/index.tsx
I do not understand if there was a solution described here.
Here is what worked for me:
diff --git a/.bootstraprc b/.bootstraprc
index f942e78..180eb6e 100644
--- a/.bootstraprc
+++ b/.bootstraprc
@@ -34,7 +34,6 @@ styles:
mixins: true
# Reset and dependencies
- normalize: true
print: true
# Core CSS
@@ -64,7 +63,6 @@ styles:
navbar: true
pagination: true
progress: true
- responsive-embed: true
transitions: true
# Components w/ JavaScript
diff --git a/package.json b/package.json
index b63bb6b..5935882 100644
--- a/package.json
+++ b/package.json
@@ -16,8 +16,8 @@
"@types/react-router-dom": "^4.0.4",
"@types/webpack-env": "^1.13.0",
"awesome-typescript-loader": "^3.1.3",
- "bootstrap": "^4.0.0-alpha.6",
- "bootstrap-loader": "^2.1.0",
+ "bootstrap": "^4.0.0",
+ "bootstrap-loader": "^2.2.0",
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.28.4",
"exports-loader": "^0.6.4",
Hope that helps someone else! ๐
@mbenzenhoefer It works for me now, thank you very much.
I spent half a day trying to fix that issue :(