Styles won't load

[Jurrevandenberg]

Hello, I've made a wordpress theme with your boilerplate and at first it worked fine, but now it won't load the CSS. When I run "npm start" it gives no errors, it also updates the public application.css but nothing change on the site. I only see HTML. I hope you have an idea and maybe a solution.

Current Behavior

When I start my theme with "npm start" I see only HTML, the CSS doesn't apply to anything.

Expected Behavior

What it should do is to apply the CSS.

Steps to Reproduce (for bugs)

1. Run "npm install" command
2. Run "composer install --no-dev --no-scripts" command
3. Run "npm run build" command
4. Run 'npm start"

Your Environment

• PHP version: 7.3.9
• Development environment: MAMP Pro
• Server type: Apache
• Operating System and version: macOS Catalina 10.15.1

[MetarDev]

Hi @Jurrevandenberg,

When I run "npm start" it gives no errors

Are you sure there weren't any errors? If you don't see any css / you see just HTML it usually means the application.css wasn't built (which happens when there's an error in your JS / SCSS syntax). Please scroll up a bit in the terminal output so you're 100% sure there wasn't an error there.

Having an error in your SCSS syntax would 100% cause the issue you're describing.

it also updates the public application.css but nothing change on the site

If this is the case, are you sure you have cache disabled locally? (Dev tools open with Disable cache option enabled while refreshing the page)

Edit: Also, open the Network tab in devtools and check if application.css is actually loaded.

[Jurrevandenberg]

Are you sure there weren't any errors? If you don't see any css / you see just HTML it usually means the application.css wasn't built (which happens when there's an error in your JS / SCSS syntax). Please scroll up a bit in the terminal output so you're 100% sure there wasn't an error there.

I'm sure that there are no errors, it perfectly runs "npm start".

If this is the case, are you sure you have cache disabled locally? (Dev tools open with Disable cache option enabled while refreshing the page)

I disabled cache option and refreshed the page multiple times, but still I see no CSS. The styles.css and the styles.min.css are loaded.

[MetarDev]

The styles.css and the styles.min.css are loaded.

It should be application.css, not style.css

[MetarDev]

Assuming application.css is being loaded, please try the following:

1. Delete the public folder
2. npm run build or npm start (causing public folder to rebuild)
3. Make sure application.css is in the public folder (if it is it that means npm run build was successful)

You should see the changes.

If you don't see them after that, it's most likely some kind of cache.

[Jurrevandenberg]

If I execute "npm start" my public file looks like this:

It creates a application-983bf1358c5b935d7708.css file.

If I understand it correctly I need to load the application.css file instead of the style.css file.

[MetarDev]

It creates a application-983bf1358c5b935d7708.css file.

Yes, the random string at the end is for cache busting during local development (when you're running npm start. It's not there on production builds (when you run npm run build). In either case, way the correct file will be enqueued.

If I understand it correctly I need to load the application.css file instead of the style.css file.

Yes, this should happen automatically unless you were overriding the default enqueue methods.

[iruzevic]

We released a new version of the boilerplate, can you test if this happens with the new version as well?

[iruzevic]

I will close this due to inactivity