Open timtorres opened 5 years ago
The base styles are inserted as a internal stylesheet.
Sounds like you're referring to dev behaviour when calling yarn start
?
@timtorres this would be due to the ordering of files output in the dist/snippets/style-tags.liquid
which is generated by the style-tags.html
template. Open to suggestions on how to improve it.
Sounds like you're referring to dev behaviour when calling
yarn start
?
Correct, but I assume the same behavior for deploying?
I'm afraid I wouldn't be much help with a fix, but ideally I'd like to define all my CSS files in one place, whether they're vanilla CSS, SCSS, or contain Liquid. That order would be the order that they're added in the rendered file.
Correct, but I assume the same behavior for deploying?
Nope -- in development, styles are included in the main JS file and applied to the page with JS to enable Hot Module Reloading (instant style updates when developing). yarn deploy
is the production build and is what you'll see when you're shipping your theme.
I'd like to define all my CSS files in one place, whether they're vanilla CSS, SCSS, or contain Liquid. That order would be the order that they're added in the rendered file.
Dependencies are including in the order they are imported in from your main JS entry points, e.g. src/scripts/layouts/theme.js
imports a couple style sheets, change the order there if you want them loaded in different order (sorry forgot to mention this in my first reply).
@t-kelly I'm struggling with this issue also. In my theme.js
file I first import theme.scss.liquid
and then another scss file afterwards. In development these are queued up in the order that I imported them in theme.js
, but in production my theme.scss.liquid
is inserted after my other file - the opposite of how I imported them in theme.js
.
EDIT: Just to clarify, my second stylesheet is being linked as layout.theme.css
before layout.theme.styleLiquid.scss.css
Problem
I have two CSS files, a base and a custom file, if you will. They're both in the
/styles/static
folder and the custom file needs to be defined last to override the base file. However, the base file is regular CSS (no SCSS or Liquid) and the custom has Liquid which means:layout.theme.styleLiquid.scss.css
file.Replication steps
Define two stylesheets with conflicting styles in
theme.js
. The one with Liquid in it will automatically be overridden by the other.Additional Info
I've tried adding a .liquid extension to the base file and importing that before the custom file, but something in it is failing to render and I don't know how to debug. I could also put it inside the asset folder and link it in
theme.liquid
but I don't think that's how it's meant to be done.Apologies if this is a stupid question...