I’ve been testing minifying our theme.scss file and it breaks the theme, even though the theme runs perfectly without minification.
What could be causing this?
My guess would be that whatever you are using to minify the code is designed for css not scss. If you want to minify your styles you probably need to do the scss to css conversion locally too
@NegativeSpace thanks for your reply. I can’t believe I didn’t realize this.
Unfortunately when I compile SCSS to CSS the conditional mixin statements seem to break the compiler. Here’s the result (similar to the error received when minifying the CSS):
Error: Invalid CSS after “…ccentFontStyle;”: expected “}”, was “f settings.type…”
on line 156 of stdin
font-style: $accentFontStyle;
-------------------------------^
Here are the lines it’s referencing (these are all defaults for the Brooklyn theme):
@mixin accentFontStack {
font-family: $accentFontStack;
font-weight: $accentFontWeight;
font-style: $accentFontStyle;
{% if settings.type_accent_spacing %}
letter-spacing: 0.1em;
{% endif %}
{% if settings.type_accent_transform %}
text-transform: uppercase;
{% endif %}
}
It is probably breaking because it doesn’t recognize the liquid code, you need to find a way to make the SCSS compiler ignore the liquid tags.
If you found my suggestions helpful I would appreciate you leaving a like and accepting my reply as the answer if think it is the answer 