Yarn build:production without assets when removing font-reference

[josialoos]

I already commented this in this thread about yarn build:production not compiling scss-assets but as this is actually an own different problem with similar symptoms and I got no answers so far, I decided to open this new thread.

in main.scss I have @import "common/font";

in common/_font.scss I have linked a font like this:

// SOURCE SANS PRO
// this css-code was created via https://google-webfonts-helper.herokuapp.com/

/* stylelint-disable */
/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans-v17-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Light'), local('OpenSans-Light'),
       url('../fonts/open-sans-v17-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v17-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v17-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v17-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v17-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* stylelint-enable */

funny thing is I’m not using the font anywhere … I’m instead importing google fonts via google cdn in setup.php and using a completely different font. so I don’t need the _font.scss file and want to delete it - together with the font in the /fonts folder. but thats not possible, it will break my production build …

As soon as I delete the file _font.scss AND/OR the @import in main.scss I will get a page without compiled custom scss on yarn build:production .

I tried deleting the dist-folder and .cache-loader. Of course I also did browser hard refresh, etc … doesn’t help.

yarn build works perfect.

Any ideas? What am I missing?

[slowrush]

@josialoos, pop the error you get after running the build:production task here, sounds like you’re referencing the font file somewhere, hopefully the error message will clarify.

[josialoos]

hey thanks for your reply @slowrush

I’m not getting an error. build:production protocol looks perfectly normal except main.css is very small and does not contain any custom styles as far as I could figure out. result on localhost is a white page without custom styles. only bootstrap css works.

And I’m not referencing the font anywhere. I tripplechecked that of course.

any other ideas?

[slowrush]

Are you using Sage10? Sound like it may be the purgeCss plugin stripping out all your styles, comment it out in the webpack.mix.js to confirm

[josialoos]

No I’m on Sage9. Could that still be the issue?

[slowrush]

Nope, don’t think purgeCss is setup by default in sage 9 although I haven’t used in in quite a while.

I’d start by clearing out all css and just do a few simple imports to verify it’s building/compiling scss correctly with the build:production task.

If that doesn’t work it may be something up in webpack config / build scripts.

Without any errors / access to the code it’s pretty tough to identify the issue. Best of luck!