bertho-zero / react-redux-universal-hot-example

A starter boilerplate for a universal webapp using react, redux, express and feathers
https://react-hot-example.herokuapp.com/
MIT License
635 stars 171 forks source link

issues updating bootstrap 3 to bootstrap 4 #559

Open S1MB10T3 opened 5 years ago

S1MB10T3 commented 5 years ago

Getting errors message like the one bellow when I try to use Bootstrap 4 instead of 3.

error log:

[0] ERROR in ./node_modules/bootstrap-loader/no-op.js (./node_modules/css-loader?sourceMap&importLoaders=2!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?sourceMap!./node_modules/postcss-loader/src!./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":4,"loglevel":"debug","preBootstrapCustomizations":"/home/s1mb10t3/Projects/cozy-nyc/src/theme/variables.scss","appStyles":"/home/s1mb10t3/Projects/cozy-nyc/src/theme/app.scss","extractStyles":false,"styleLoaders":["style-loader?sourceMap","css-loader?sourceMap&importLoaders=2","resolve-url-loader","sass-loader?sourceMap","postcss-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","transitions","carousel","modal","popover","tooltip","utilities"],"scripts":false,"configFilePath":"/home/s1mb10t3/Projects/cozy-nyc/.bootstraprc","bootstrapPath":"/home/s1mb10t3/Projects/cozy-nyc/node_modules/bootstrap","bootstrapRelPath":"../bootstrap"}!./node_modules/bootstrap-loader/no-op.js)
[0] Module build failed (from ./node_modules/postcss-loader/src/index.js):
[0] Error: Failed to find '../bootstrap/scss/_mixins'
[0]   in [
[0]     /home/s1mb10t3/Projects/cozy-nyc/node_modules/bootstrap-loader
[0]   ]
[0]     at resolveModule.catch.catch (/home/s1mb10t3/Projects/cozy-nyc/node_modules/postcss-import/lib/resolve-id.js:35:13)
[0]  @ ./node_modules/bootstrap-loader/no-op.js (./node_modules/style-loader?sourceMap!./node_modules/css-loader?sourceMap&importLoaders=2!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?sourceMap!./node_modules/postcss-loader/src!./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":4,"loglevel":"debug","preBootstrapCustomizations":"/home/s1mb10t3/Projects/cozy-nyc/src/theme/variables.scss","appStyles":"/home/s1mb10t3/Projects/cozy-nyc/src/theme/app.scss","extractStyles":false,"styleLoaders":["style-loader?sourceMap","css-loader?sourceMap&importLoaders=2","resolve-url-loader","sass-loader?sourceMap","postcss-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","transitions","carousel","modal","popover","tooltip","utilities"],"scripts":false,"configFilePath":"/home/s1mb10t3/Projects/cozy-nyc/.bootstraprc","bootstrapPath":"/home/s1mb10t3/Projects/cozy-nyc/node_modules/bootstrap","bootstrapRelPath":"../bootstrap"}!./node_modules/bootstrap-loader/no-op.js) 2:14-1209 21:1-42:3 22:19-1214
[0]  @ ./node_modules/bootstrap-loader/lib/bootstrap.loader.js!./node_modules/bootstrap-loader/no-op.js
[0]  @ ./node_modules/bootstrap-loader/loader.js
[0]  @ multi webpack-hot-middleware/client?path=http://localhost:3001/__webpack_hmr bootstrap-loader ./src/client.js
[0] 
[0] ERROR in ./src/containers/Profile/Profile.scss (./node_modules/css-loader?{"modules":true,"importLoaders":2,"sourceMap":true,"localIdentName":"[local]___[hash:base64:5]"}!./node_modules/postcss-loader/src?{"sourceMap":true,"config":{"path":"postcss.config.js"}}!./node_modules/sass-loader/lib/loader.js?{"outputStyle":"expanded","sourceMap":true}!./src/containers/Profile/Profile.scss)
[0] Module build failed (from ./node_modules/sass-loader/lib/loader.js):
[0] 
[0] $link-hover-color:                        darken($link-color, 15%) !default;
[0]                                          ^
[0]       Argument `$color` of `darken($color, $amount)` must be a color
[0]       in /home/s1mb10t3/Projects/cozy-nyc/node_modules/bootstrap/scss/_variables.scss (line 174, column 43)
[0]  @ ./src/containers/Profile/Profile.scss 2:14-403 21:1-42:3 22:19-408
[0]  @ ./src/containers/Profile/Profile.js
[0]  @ ./src/containers/Profile/Loadable.js
[0]  @ ./src/routes.js
[0]  @ ./src/client.js
[0]  @ multi webpack-hot-middleware/client?path=http://localhost:3001/__webpack_hmr bootstrap-loader ./src/client.js

Did so by changing the "bootstrapVersion" in bootstraprc, added "postcss-loader" to the list of styleLoaders, disabled all scripts, and allowed all styles.

bootstraprc:

{
  "bootstrapVersion": 4,
  "preBootstrapCustomizations": "./src/theme/variables.scss",
  "appStyles": "./src/theme/app.scss",
  "loglevel": "debug",
  "env": {
    "development": {
      "styleLoaders": [
        "style-loader?sourceMap",
        "css-loader?sourceMap&importLoaders=2",
        "resolve-url-loader",
        "sass-loader?sourceMap",
        "postcss-loader"
      ],
      "extractStyles": false
    },
    "production": {
      "styleLoaders": [
        "style-loader",
        "css-loader?importLoaders=1",
        "sass-loader?sourceMap"
      ],
      "extractStyles": true
    }
  },
  "scripts": false,
  "styles": true,
}