SCSS in section liquid file is not compiling into the styles.css file

Shopify Partner
12 0 2

I'm running into an issue where I am copying a section file from a child theme to my live theme. There's SCSS in the file that's not showing up on my live theme but it is on the child theme. I know this because I see a funky looking element, inspect it in both places, and there is a style on the child version that's not on the live version.

 

The stylesheet code isn't being compiled into the styles.css file, so where I have these styles on the child theme:

 

@media (min-width: 100px){.flexslider{height:300px}.flexslider .slides img{height:300px}.flexslider .box{position:absolute;top:10px;left:10px;bottom:10px;right:10px;padding:10px;max-width:350px}.flexslider h1 small{color:#000;display:block;font-size:0.6em;font-style:italic}.flexslider .slides li{background:url() center center/cover no-repeat}.flexslider .slides img{opacity:0}}@media (min-width: 700px){.flexslider{height:500px}.flexslider .slides img{height:500px}.flexslider .box{top:50%;left:20px;bottom:auto;right:auto;padding:25px;transform:translateY(-50%)}}@media (min-width: 1000px){.flexslider .box{left:50px;max-width:500px;padding:40px}}@media (min-width: 1600px){.flexslider{height:600px}.flexslider .slides img{height:600px}}

they do not show in the live theme. Here's the stylesheet tag within the section:

 

{% stylesheet 'scss' %}
.flexslider {
  @media (min-width:100px) {
    height: 300px;
    //width: 500px;
    .slides img {
      height: 300px;
      //width: 500px;
    }
    .box {
      position: absolute;
      top: 10px;
      left: 10px;
      bottom: 10px;
      right: 10px;
      padding: 10px;
      max-width: 350px;
    }
    h1 {
      small {
        color: #000;
        display:block; 
        font-size: 0.6em;
        font-style:italic;
      }
    }
    .slides {
      li {background:url() center center / cover no-repeat;}
      img {opacity:0;}
    }
  }
  @media (min-width:700px) {
    height: 500px;
    //width: 960px;
    .slides img {
      height: 500px;
      //width: 960px;
    }
    .box {
      top: 50%;
      left: 20px;
      bottom: auto;
      right: auto;
      padding: 25px;
    transform:translateY(-50%);
    }
  }
  @media (min-width:1000px) {
    //width: 1280px;
    .slides img {
      //width: 1280px;
    }
    .box {
      left: 50px;
      max-width: 500px;
      padding: 40px;
    }
  }
  @media (min-width:1600px) {
    height: 600px;
    .slides img {
      height: 600px;
    }
  }
}
{% endstylesheet %}

Is there a way I might force the styles.css file to recompile?

0 Likes
Shopify Partner
1152 131 197

The styles for all sections are also concatenated into a single file by Shopify and injected into content_for_header, it's not part of the stylesheet files under assets folder.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes