Hey Guys,
Having an issue when running yarn build:production.
I’m getting the error Module build failed: Unclosed block and it seems the error is occurring only when I have a background within a media query (If I remove the background, the build goes through).
@media (min-width: 992px) {
.content__double {
background:url(’…/images/feature.jpg’);
}
}
feature.jpg can be found in assets/images/feature.jpg, is anyone else having this issue?
That sounds like it’s a syntax error in your CSS, like one bracket too many (or less). Check your code to see if there’s any blocks that are not properly closed off.
I thought that was the case, so I tried on another project.
Ran yarn build:production everything runs, no errors.
As soon as I try to call an asset image as a background within a media query … I’m presented with an error and the the command fails.
I’ve tried changing to background:#fff; and it works but changing to background:url(’…/images/feature.jpg’) 50% no-repeat; it fails. I will also note if I put that code outside of media query it will compile.
There must be an issue with the way media queries are being processed in your project… have you tried rm -rf node_modules/ && yarn install? Could be a bad dependency in your NPM cache which needs flushing out.
Still having the same issue, I thought it might of been a windows issue so I tried on a mac and get the same error.
Just so we can be on the same page, I’ve created a new project using 9.0.0-beta.2 and ran yarn build:production and everything worked. Once I add a background in a media query it breaks.
I’ve uploaded this test project to https://github.com/hubsta/sage , pull it and run yarn and than try to run yarn build:production and let me know if it completes. The only file I have changed is main.scss.
Wanted to jump on the bandwagon here. Sage 9.0.0-beta.2. Am seeing the same type of error - it is telling me it is dying on “background-image” but I’m not smart enough with sass to know if this is the same problem:
yarn run build:production
Child extract-text-webpack-plugin:
[0] ../~/css-loader?-sourceMap!../~/postcss-loader!../~/resolve-url-loader?-sourceMap!../~/sass-loader?-sourceMap!./styles/main.scss 22.9 kB {0} [built] [failed] [1 error]
ERROR in ../~/css-loader?-sourceMap!../~/postcss-loader!../~/resolve-url-loader?-sourceMap!../~/sass-loader?-sourceMap!./styles/main.scss
Module build failed: Unclosed block (8802:5041)
8800 |
8801 | .navbar-light .navbar-toggler-icon {
> 8802 | background-image: url("data:image/svg+xml;charset=utf8,<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/></svg>")}.navbar-light .navbar-brand,.navbar-light .navbar-toggler{color:#fff}.navbar-light .navbar-toggler{transform:translateY(35%)}.single .navbar-light .navbar-toggler{transform:translateY(15%)}.content-info{position:relative;background-color:#eeeeee;padding:55px 0}@media (max-width: 768px){.content-info{padding:15px 0 0}}.content-info .acf-map{height:300px;pointer-events:none}@media (min-width: 768px){.content-info .acf-map{position:absolute;width:calc(50% - 20px);top:0;right:0;bottom:0;height:100%}}.home .banner .screen{padding:242px 0 207px}.home .banner h1{margin-bottom:24px}.home .banner p{font-size:20px;font-weight:400}.archive .banner .screen,.page-template-template-featured-blade .banner .screen{padding:194px 0 67px}.archive .post-list .properties .view-more,.page-template-template-featured-blade .post-list .properties .view-more{margin-top:9px;padding:4px 19px}.archive.tax-town .post-list .properties h2,.page-template-template-featured-blade.tax-town .post-list .properties h2{margin-bottom:13px}@media (max-width: 768px){.archive.tax-town .post-list .properties h2,.page-template-template-featured-blade.tax-town .post-list .properties h2{margin:15px 0}}.archive.tax-town .post-list .properties .view-more,.page-template-template-featured-blade.tax-town .post-list .properties .view-more{padding:4px 25px}.page-template-template-featured-blade .post-list .properties h2{margin-bottom:13px}.single h1,.single h2,.single h3,.single h4,.single h5,.single h6{color:#5b2734}.single .ctas p a:only-child,.single .text-section p a:only-child,.single .view-more{background-color:#5b2734;border:2px solid #5b2734}.single .ctas p a:only-child:hover,.single .ctas p a:only-child:active,.single .ctas p a:only-child:focus,.single .text-section p a:only-child:hover,.single .text-section p a:only-child:active,.single .text-section p a:only-child:focus,.single .view-more:hover,.single .view-more:active,.single .view-more:focus{background-color:transparent;color:#5b2734}.single .header{padding:15px 0}@media (min-width: 768px){.single .header{padding:49px}}.single .banner h1{color:#fff}.single .banner .screen{padding:216px 0 118px}.single .banner .filter{background-color:#5b2734;opacity:.8}.single .banner h1{margin-bottom:20px}.single .banner p{line-height:1.3}.single .banner .links{position:absolute;z-index:10;bottom:40px;left:0;width:100%}@media (max-width: 768px){.single .banner .links .col-md-4+.col-md-4{margin-top:15px}}@media (min-width: 1200px){.single .banner .links .col-md-4{padding:0 45px}}.single .banner .links__item{display:block;height:200px;border:solid 2px #ffffff;position:relative;background:center center no-repeat;background-size:cover;transition:border-width .2s ease-in}.single .banner .links__item:hover{border-width:7px}.single .banner .links__item:hover .links__text{opacity:1}.single .banner .links__text{width:100%;position:absolute;text-align:center;top:50%;left:50%;transform:translate(-50%, -50%);color:#fff;font-size:14px;font-weight:300;transition:opacity .2s ease-in;padding:15px}@media (min-width: 768px){.single .banner .links__text{opacity:0}}.single .banner .links__text .fa{font-size:16px;display:inline-block;margin-right:18px}.single .content-info{background-color:#5b2734;color:#fff;font-weight:300}@media (max-width: 768px){.single .content-info .col-md-12{text-align:center;margin-bottom:30px}}.single .content-info .col-md-12 a{display:inline-block;vertical-align:top}@media (min-width: 768px){.single .content-info .col-md-12 a+a{margin-left:50px}}.single .content-info .svg-image path,.single .content-info .svg-image polygon{fill:#fff}.single .content-info a{color:#fff}.single .content-info svg{display:inline-block;margin-left:10px;width:150px}.single .content-info .information__item{padding:0}@media (min-width: 1200px){.single .content-info .col-md-4:nth-child(3){padding-left:163px}}@media (min-width: 1200px){.single .content-info .col-md-4:nth-child(4){padding-left:95px}}.single .content-info .copyright:first-of-type{margin-top:15px}.single-properties .banner .screen{padding:216px 0 320px}@media (max-width: 768px){.single-properties .banner .screen{padding-bottom:800px}}.single-amenities .text-section{overflow:hidden}@media (max-width: 991px){.single-amenities .text-section .row{padding:0 15px}}.single-amenities .text-section .col-md-6{padding:0 15px}@media (min-width: 992px){.single-amenities .text-section .col-md-6{position:static;padding:0 80px}}@media (min-width: 992px){.single-amenities .text-section img{position:absolute;top:50%;transform:translateY(-50%);right:50%;width:50%;height:auto}}.plans{padding:80px 0}@media (max-width: 768px){.plans{padding:30px 0}}@media (max-width: 768px){.plans__item{margin-top:30px}}.plans__title{color:#5b2734;margin-bottom:0}.plans__description{color:#4a4a4a}
@media (min-width: 768px){.plans .row+.row{position:relative;margin-top:60px;padding-top:60px}.plans .row+.row:before{content:'';
^
8803 | position: absolute;
8804 | top: 0;
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.I wanted to write - while not - ideal - changing:
- name: Compile assets for production
command: yarn run build:production
connection: local
args:
chdir: "{{ project_local_path }}/web/app/themes/pillare"
to
- name: Compile assets for production
command: yarn run build
connection: local
args:
chdir: "{{ project_local_path }}/web/app/themes/pillare"
will work and deploy without issues. Obviously we’re making a tradeoff, but it also doesn’t seem gtmetrix hurt too bad:
…Only as a temporary workaround.
I tried debugging this a bit and found that the source of the issue is bootstrap, precisely the navbar module of bootstrap.
After some digging I realised the cause of the problem is this variable in bootstrap:
$navbar-inverse-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-inverse-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"), "#", "%23") !default;
I usually do not include the whole bootstrap but just the modules I need, thus never really had this problem before, but I found this that might give you a better insight:
Setting both variables to none fixed it for me, thanks.