Load second stylesheet not working (under the fold stylesheet)

I'm trying to load a second stylesheet, exactly the same way the current stylesheet is loaded.

 

Currently I have ''theme.scss.liquid'' which is in asset folder and called in theme.liquid this way : 

 

 {{ 'theme.scss.css' | asset_url | stylesheet_tag }}

Now I created "underthefold.scss.liquid" in asset folder and call it in theme.liquid as : 

 

{{ 'underthefold.scss.css' | asset_url | stylesheet_tag }}

 

The new stylesheet is not loading, returning status 422, not processable. Please someone help my logic, I can't get this to work.

 

Side note : what do you think of loading another stylesheet for "under the fold content", thus eliminating render blocking ressources ? Is this the best way to do it ?

C'est simple comme bonjour ! Ou presque.
Need some help to customize your website? Message me anytime: 5euros.com/profil/maxdesign
0 Likes
SobefyOscar
Shopify Partner
113 11 30

Can you share a snapshot of your current theme.liquid file? 

If you have it like this, it should load fine, also,  is it pure css or scss? 

 

{{ 'theme.scss.css' | asset_url | stylesheet_tag }}
{{ 'underthefold.scss.css' | asset_url | stylesheet_tag }} 
Want to customize or make changes to a theme? Hire me.
If my answer was helpful please Like and Accept Solution.
Email: oscar@sobefy.com
Website: Sobefy.com
0 Likes

 

Here is a screenshot with both unactive stylesheet tabs underlined in red.

 

I do not intend to load them next to each other but you can see this way.

For your question, I presmume it's a "css" file but with a ".scss" extension. Does it matter what kind of css is inside my file ? I mean, everything was inside theme.scss at first, and I put some of the code in "underthefold.scss.css", which is not working. I guess you can replicate this error and there must be a reason for this.

 

Sans titre.jpg

C'est simple comme bonjour ! Ou presque.
Need some help to customize your website? Message me anytime: 5euros.com/profil/maxdesign
0 Likes
SobefyOscar
Shopify Partner
113 11 30

Unless there's a typo on the title of your css file it looks good to me.  I'm sure you did already, but can you double check that your asset file and your asset callout are named the same? 

Want to customize or make changes to a theme? Hire me.
If my answer was helpful please Like and Accept Solution.
Email: oscar@sobefy.com
Website: Sobefy.com
0 Likes

I did already. You can check on the screenshot, I underlined my stylesheet tabs with a red pencil. Could you replicate this ? Because so far, it does not look good to me ^^ 

 

Here's another screeshot from google dev tools :

 

Sans titre.png

C'est simple comme bonjour ! Ou presque.
Need some help to customize your website? Message me anytime: 5euros.com/profil/maxdesign
0 Likes
SobefyOscar
Shopify Partner
113 11 30

Could you show me a screenshot of your second stylesheet? Or maybe paste the code here? Trying to figure it out with you, def a weird challenge. 

Want to customize or make changes to a theme? Hire me.
If my answer was helpful please Like and Accept Solution.
Email: oscar@sobefy.com
Website: Sobefy.com

It's just a bunch of personal code which is not needed to render first paint. It causes no problem at all if this code is run in theme.scss, so I think we should be looking elsewhere:

 

The page starts like this :

 

/* ========================================================================================================================================
CODE PERSONNEL 
===========================================================================================================================================*/

// header

.contact-phone {
  height:45px;
  width:280px;
  padding:5px;
}



.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


// Shipping infoproduct page 


.shipping {
  background-color: #f8f9fa;
  padding: 3%;
  margin:10px 5px;
}

.shipping .delivery-fees-estimated {
  font-weight: 700;
}

.shipping-options p {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 5px 0 0;
  &:first-child, &:last-child{margin-top:10px}
}


.delivery-info {
  font-size: 0.78em;
}

.shipping-options .delivery-price {
  color: #676767;
  margin-left:auto;
}

.delivery-price-label {
  color: #262626;
  line-height:1.5em;
}

And so on with lots of code. Are we even allowed to load multiple stylesheets ? Please someone try it on your own development store if you have one, this is curious.

C'est simple comme bonjour ! Ou presque.
Need some help to customize your website? Message me anytime: 5euros.com/profil/maxdesign
0 Likes

Okay ! I got it to work now.

 

This was a silly mistake. I had forgotten that predefined rules could not work if the rules were defined in the first stylesheet. Some piece of code like the following one broke the stylesheet:

 

 @include media-query($small) {
    height:initial;
}

After I commented these out it was working. You oriented me towards the solution thank you!

C'est simple comme bonjour ! Ou presque.
Need some help to customize your website? Message me anytime: 5euros.com/profil/maxdesign
SobefyOscar
Shopify Partner
113 11 30

Nice! No problem, glad you figured it out :)

Want to customize or make changes to a theme? Hire me.
If my answer was helpful please Like and Accept Solution.
Email: oscar@sobefy.com
Website: Sobefy.com
0 Likes
eamers
New Member
3 0 0

Hey @MaxDesign, I'm having the same issue. You mentioned commenting out some of the code. Can you help me to understand exactly what I need to comment out in which asset sheet? Thanks!

0 Likes