'Yarn start' not inlueds my css file

sage
,
1

I created an scss file as described in the docs. If I run yarn build, it works as expected: the css rules are applied. But if I run yarn start, I don’t find my rules anymore, my scss file is not inclueded, and the rules are not applied.

My config.json file:

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ],
    "frontpage": [
      "./styles/frontpage.scss"
    ]
  }, ...

The app/setup.php:

<?php ...
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style('sage/main.css', asset_path('styles/main.css'), false, null);
    wp_enqueue_script('sage/main.js', asset_path('scripts/main.js'), ['jquery'], null, true);

    if (is_single() && comments_open() && get_option('thread_comments')) {
        wp_enqueue_script('comment-reply');
    }

    if (is_front_page()) {
        wp_enqueue_style('sage/frontpage.css', asset_path('styles/frontpage.css'), false, null);
    }
}, 100);
...
2

It sounds like there are a few things going on here.

First, when running yarn start, it’s normal not to see the CSS files in your filesystem, and to receive 404 errors in your console. This is expected behavior; it’s just part of how Sage’s implementation of Webpack works.

What’s not expected, however, is you not seeing your styles. They should be automatically injected into your browser by Webpack even though they’re not saved to the filesystem.

Can you check your resources/assets/config.json file and confirm that publicPath and devUrl are set correctly?

You could also try hard-refreshing your browser (hold SHIFT and click “refresh”); sometimes browsers just need a kick in the head.

3

Yes, resources/assets/config.json is set correctly:

 "publicPath": "/wp-content/themes/sage",
  "devUrl": "http://mylocalsitename.test",
  "proxyUrl": "http://localhost:3000",

I use valet, I don’t know if it can be related with?
Hard refreshing does not help.
It’s also interesting, when I go after yarn build to mylocalsitename.test, it appears as it should, but after I run yarn start, not just in the localhost:3000 miss my styles, but if I refresh mylocalsitename.test the styles are gone from there too.

4

This is actually normal too. start clears out the dist directory to avoid conflicts.

While you’re running start, if you save a change to a stylesheet, do you see the Browsersync messages in the top-right of your browser pointed to localhost:3000?

5

Yes, I see the messages Rebuilding and Webpack ... built in xy ms.

6

I created a fresh Sage-theme in a fresh WP, and I experience the same. I tried it on linux valet, and on WIndows Local by Flywheel. Either I made the same mistake 3 times, or it’s a bug.
I write down the steps:

1, Install sage: composer create-project roots/sage sage

2, cd sage/ && yarn && yarn build

3, Create a mycss.scss file in resources/assets/styles/mycss.scss
Add e.g this rule in the mycss.scss:

body,
main,
content {
  background-color: navy;
}

4, Edit resources/assets/config.json, and add mycss.scss :

{
    "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ],
    "mycss": [
      "./styles/mycss.scss"
    ]
  },

5, Add this line to app/setup.php theme assets:
wp_enqueue_style('sage/mycss.css', asset_path('styles/mycss.css'), false, null);

6, Run yarn build, the background will be blue.

7, Run yarn start, the background will be white.

Please confirm, if it’s working correctly by you andI make a mistake somewhere, or it’s a bug?