Skip to content

Boostrap.css on node_modules has unclosed blocks #29854

@tfcb93

Description

@tfcb93

I was trying to compile a work and I got this message:

ERROR in ./node_modules/css-loader/dist/cjs.js??ref--2-1!./node_modules/postcss-loader/lib??ref--2-2!./node_modules/resolve-url-loader??ref--2-3!./node_modules/sass-loader/dist/cjs.js??ref--2-4!./node_modules/bootstrap/dist/css/bootstrap.css
Module build failed: Syntax Error 

(4664:2) Unclosed block

  4662 | 
  4663 | .navbar-light .navbar-toggler-icon {
> 4664 |   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
       |  ^
  4665 | }
  4666 | 

 @ ./node_modules/bootstrap/dist/css/bootstrap.css 4:14-221 18:2-22:4 19:20-227
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:3000 webpack/hot/dev-server babel-polyfill react-hot-loader/patch webpack-dev-server/client?http://0.0.0.0:3000 webpack/hot/only-dev-server whatwg-fetch ./src/index
Child html-webpack-plugin for "index.html":
     1 asset
    [./node_modules/html-webpack-plugin/lib/loader.js!./index.hbs] ./node_modules/html-webpack-plugin/lib/loader.js!./index.hbs 716 bytes {0} [built]
    [./node_modules/lodash/lodash.js] ./node_modules/lodash/lodash.js 541 kB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 517 bytes {0} [built]
webpack: Failed to compile.

I went to the bootstrap.css file and deleted the class and got another one:

ERROR in ./node_modules/css-loader/dist/cjs.js??ref--2-1!./node_modules/postcss-loader/lib??ref--2-2!./node_modules/resolve-url-loader??ref--2-3!./node_modules/sass-loader/dist/cjs.js??ref--2-4!./node_modules/bootstrap/dist/css/bootstrap.css
Module build failed: Syntax Error 

(4709:2) Unclosed block

  4707 | 
  4708 | .navbar-dark .navbar-toggler-icon {
> 4709 |   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
       |  ^
  4710 | }
  4711 | 

I also deleted this one and now everything works perfectly.

I notice that on issues like #25211 people said to override the classes with other stuff, but this didn't work for me. I think this is somehow related to #25521 too.
Well, I don't think to delete files on bootstrap.css is a good solution. I hope this can be fixed or clarified soon.
Thanks for your attention.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions