Skip to content

issues updating bootstrap 3 to bootstrap 4 #559

Description

@S1MB10T3

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,
}

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions