Sage 10: yarn build:production removes some styles

Hi, I’m using Sage 10 and my Website is actually done and looks as it should when I run ‘yarn start’ or ‘run build’. But running yarn build:production some site elements remain unstyled because the css for them is simply not present in the production build of app.css. That happens with what seemingly random styles in header.scss, footer.scss and global.scss.
No errors displayed on build.

For example he following part of my global.scss just never shows app in production build of my app.scss:
.directlinks {
line-height: 1.5;
margin-top: 1rem;
a {
font-weight: bold;
border-bottom: 1px solid;
text-decoration: none;
}
}

But this one just below makes it into the production build:
.btlink {
line-height: 1.5;
display: inline-block;
margin-top: 1rem;
color: theme-color(‘tj-red’) !important;
font-weight: bold;
border-bottom: 1px solid;
text-decoration: none;
&:hover {
color: theme-color(‘tj-black’) !important;
}
}

You may have to set the purgeCss options:

Thanks a lot Xilonz, that solved my problem! Actually all the classes I entered to my content through the WordPress editor had disappeared, what makes sense to me now. I disabled purgeCss with {enabled:false}. A cleaner solution for larger sites would probably be to create an scss file with all classes that have been added to Wordpress blocks in the editor and than add that file to the process queue after the purgeCss() command. Have not tested that though…

This topic was automatically closed after 42 days. New replies are no longer allowed.