Yarn build:production assets missing; works on yarn build

sage
1

Basically when I was about to do my first push to production the yarn build:production process completed successfully but a lot of custom styling (maybe all?) is removed and I’m left with only the default bootstrap v4 CSS. It is as described here (note, I didn’t change config or get an error the OP reported, but the result is the same. I am also using navbar from BS4 but version 4.5.2)

There are two similar solutions in this thread, neither worked

My packages.json is below. Not sure where the problem could be since there’s no error and it works for staging yarn build

"devDependencies": {
    "@tinypixelco/laravel-mix-wp-blocks": "^1.1.0",
    "@wordpress/babel-preset-default": "^4.17.0",
    "@wordpress/browserslist-config": "^2.7.0",
    "@wordpress/dependency-extraction-webpack-plugin": "^2.8.0",
    "babel-eslint": "^10.1.0",
    "browser-sync": "^2.26.12",
    "browser-sync-webpack-plugin": "^2.0.1",
    "cross-env": "^7.0.2",
    "eslint": "^7.7.0",
    "eslint-plugin-import": "^2.22.0",
    "laravel-mix": "^5.0.4",
    "laravel-mix-copy-watched": "^2.2.4",
    "laravel-mix-purgecss": "^5.0.0",
    "npm-run-all": "^4.1",
    "purgecss-with-wordpress": "^2.3.0",
    "rimraf": "^3.0.2",
    "sass": "^1.26.10",
    "sass-loader": "^9.0.3",
    "stylelint": "^13.6.1",
    "stylelint-config-standard": "^20.0.0",
    "vue-template-compiler": "^2.6.11"
  },
  "dependencies": {
    "bootstrap": "^4.5.2",
    "jquery": "^3.5.1",
    "js-dom-router": "^1.0.0",
    "popper.js": "^1.16.1"
  }
2

If I comment out this code in webpack.mix.js, build:production works fine. Anyone else come across this?

.purgeCss({
     whitelist: require('purgecss-with-wordpress').whitelist,
     whitelistPatterns: require('purgecss-with-wordpress').whitelistPatterns,
   });
3

This behavior is intended. I’d read up on PurgeCSS to get an idea of how it works: https://purgecss.com/

4

But purgeCss is default in sage 10. Why would the intended behavior for a production build be to strip out all my custom CSS I put in the scss files? I get the purpose of it, but it removes EVERYTHING custom.

My site looks fine in staging and all custom styling is there, but in production I only see the default bootstrap 4 CSS; my added design built in resources/assets/styles/ folder is getting stripped out.

5

Can you expand on how your project is set up? I’m not able to replicate your experience. I took the following steps:

  1. git clone git@github.com:roots/sage.git
  2. Edit the file resources/styles/app.scss to add .entry-title { background-color: red; } (after making sure entry-title existed as a class in resources/views/partials/content.blade.php
  3. npm run build:production
  4. Open dist/styles/app.css and check to make sure .entry-title { background-color: red; } existed in that file. It did.

Based on this experience, the Sage 10 PurgeCSS configuration is working as intended. Did you read the documentation I liked to for PurgeCSS?

6

Yes I did. I didn’t see any configuration that would change my situation. I going to start the process tomorrow of backing everything out and introducing things a little at a time and will report back when I narrow it down.

Not sure how to expand on it; I didn’t change anything with the project structure; the majority of the project is based around the "stoutlogic/acf-builder" plugin and the ACF interface I built. I copied over a lot of CSS styles from the original design into this new sage10 project. That plugin and the seo framework are the only plugins on the site.

I will also say, the classes do seem to exist in the file (I searched for .report-tabs, a custom class for my design, in the compressed CSS and it was there), but for whatever reason, the styles associated with that class were not being processed and displayed by any browser.

7

Is the file your classes are rendered to loaded by the browser? It’s very odd that the styles would exist but wouldn’t be rendered.

8

I’m finding bits and pieces being imported the more I dig. Could it be with errors from yarn run lint:styles ?

I see a few errors like this:

14:4   ✖  Expected double colon pseudo-element notation               selector-pseudo-element-colon-notation

I use ampersand for &:before or &:after and that command doesn’t consider it valid. So it’s not the entire site but most of the CSS is stripped out.

I wouldn’t think that would trip up purgeCss, but we’ll see.

9

Generally the lint commands will only throw a warning (which doesn’t affect the build process) or an error (which will stop it completely). I don’t think they would result a fragmented state.

10

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