Hi guys,
When I run yarn build:production I am missing some CSS.
I already found this:
Issue: Bootstrap 4 CSS causes loss of SCSS running build:production
Implemented the fix and it worked…but only kind of? some of the css is there now but some isnt…it seems to randomly select what it wants in there and does not want. (It is missing the same stuff every time)
yarn build works and renders the page fine.
HELP!
Thanks!
What version of Sage are you using? What CSS goes missing?
How do I find out what version of sage I’m using?
The project was started roughly a month ago and was just created using the composer command.
As for the CSS…it truly does seem random…
I have uploaded some screenshots of the difference.
The first one is running yarn build production and the second just yarn build.
There are arrows in the nav that should be hidden, some bootstrap column css seems to be missing in the next bit.
the section underneath the title “advisory board” is a slick carousel and none of that seems to be going in…not sure if its just not importing the slick css there but either way it isnt working.
in the footer there is a menu that is supposed to have no list-style but it does.
Most of it is there…just some of it isnt and i need it to be.
After build:production, Open your main_xyz.css from dist and check the last CSS(end of line) to get better idea of what’s going on? Or where it breaks.
package.json will have a version number near the top.
Version 9.0.0
@PrecisionCoder13 I really liked this idea until I took a look…the minification process really jumbles it up. The last few rules are for the footer but directly above those rules are some for the header and navigation so I can’t seem to get any order out of it or see where it might have broken…by the time those footer rules have been included everything else that has an issue should also have been included.
You can check the flow of css by your main.css, where you import other .scss files. Just check random css class from your .scss(not included in build:production) in main_xyz.css.
So I have a _nav.scss
Inside it I have some rules:
.navbar{
padding: 0;
ul.navbar-nav{
width: 100%;
justify-content: space-between;
li{
position: relative;
& > a {
@extend .nav-link;
color: #fff;
text-transform: uppercase;
font-size: 1.2rem;
padding: 1rem;
}
&:hover ul.dropdown-menu{
visibility: visible;
opacity: 1;
}
&.current-menu-item, &.current_page_parent{
font-weight: bold;
}
&.menu-item-has-children i.fa.fa-chevron-down{
display: none;
}
ul.dropdown-menu{
position: absolute;
visibility: hidden;
display: block;
opacity: 0;
top: 100%;
left: 0;
margin: 0;
padding: 0;
list-style-type: none;
background-color: #fff;
transition: opacity 0.2s, visibility 0s;
box-shadow: rgba(0, 0, 0, 0.176) 0px 6px 12px;
border: none;
border-radius: 0;
z-index: 1000;
li{
width: 100%;
&.active a{
background-color: $primary;
color: #fff;
}
a{
display:inline-block;
padding:10px 15px;
width:100%;
white-space: nowrap;
color: $primary;
&.dropdown-item.active, &.dropdown-item:active{
background-color: #fff;
}
}
}
}
}
}
}
Some of the thing from that file are in there and some of them arent.
.navbar has the padding: 0;
ul.navbar-nav has its styles, everything until
&.menu-item-has-children i.fa.fa-chevron-down{
display: none;
}
is excluded and then the ul.dropdown menu rules below it are included.
This is especially wierd because I have another project which is essentially an exact duplicate of this apart from a few minor tweaks and it works fine.
Posted scss looks error free, but when I checked it on http://beautifytools.com/scss-compiler.php for test, it gives few warning messages.
Please put your scss there and have a look.
Best Of Luck
This topic was automatically closed after 42 days. New replies are no longer allowed.