Module build failed: Unclosed block

[alexander-akait]

Original issue https://github.com/webpack-contrib/sass-loader/issues/354 (have minimal reproducible test repo).

Using: latest version webpack and loaders.

Short:

1. Install "bootstrap": "^4.0.0-alpha.6",.
2. Add loader:

   {
         test: /\.scss$/,
         loader: ExtractTextPlugin.extract({
             fallbackLoader: 'style-loader',
             loader: 'css-loader!resolve-url-loader!sass-loader?sourceMap'
           })
       }

3. Create reproduce-bug.scss with content:

   
   @import "~bootstrap/scss/variables";
   @import "~bootstrap/scss/mixins";
   @import "~bootstrap/scss/navbar";

.game-header-image { @include media-breakpoint-down(sm) { content: ''; } }

4. Add `require('/path/to/reproduce-bug.scss')`
5. Run assembly.

Error:
```shell
Module build failed: Unclosed block (217:4)

      215 |   .navbar-toggleable-lg>.container {
      216 |     padding-right: 0;
    > 217 |     padding-left: 0;
          |    ^
      218 |   }
      219 | }
      220 | 

Seems bug in rework parser (or stringfier). Now rework is outdate and don't fix bugs in main repo, maybe be best switch to postcss. Thanks!

[alexmarles]

Do we have a workaround to solve this? I am getting the same error message when I try to build for production but I don't even need the code inside reproduce-bug.scss, just importing Bootstrap into my application.scss file breaks my build.

My versions: node -> 8.9.4 webpack -> 3.10.0 resolve-url-loader -> 2.2.1

Ask for anything else that you may need.

Thanks!

[alexander-akait]

@alexmarles bootstrap have variable to set url to assets, use this workaround

[alexmarles]

I don't quite understand which is the solution that you are proposing here but I found that using a different version of Bootstrap works for me, so problem (kinda) solved.

[Spetnik]

It seems this is an issue with data URIs, where there are single quotes inside of a double-quoted data URI.

For example. with Bootstrap 4, the error is thrown on the following:

navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0,0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")}

[syclone]

@Spetnik I am having the exact issue at that exact line. What did you do as a work around?

FYI: I am using Bootstrap v4.1.2

[bholloway]

Finally replaced rework with postcss.

Please refer to #97 as version 3 may help any open issues.

[bholloway]

We have a new version 3.0.0. There is an e2e test with such mixed quotes (as seen in the data URI above) and it confirms working with engine:postcss.

As such I am closing this as fixed.