Additional CSS Not Injected in Sage 9

sage
1

Hey guys, I’m fighting against a big problem here: the website won’t load my custom styles into the page. I’m not referring to the console error, I have understood that because of the way webpack injects the styles into the scripts there won’t be any style in the dist folder but it should of course still work.

I have created a home.scss file inside my styles folder, added it to my config.json and enqueued it in the setup.php script.
When running “yarn build” it shows the home.scss node and the style would seem correctly included into the page since an error appears regarding the missing home.js file.

Here’s some code:
config.json:

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "home": [
      "./styles/home.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/wp-content/themes/poetz-theme",
  "devUrl": "http://poetz.local",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}

setup.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_home() ) {
        wp_enqueue_style('sage/home.css', asset_path('styles/home.css'), false, null);
    }

}, 100);
...

This is pretty essential for me to proceed with my work but I just can’t figure out why it’s happening.
I have also tried looking into the webpack.config.js but my webpack knowledge is very shallow.
Any ideas?

1 Like
2

Allright, looks like it’s related to this issue.
The style gets injected when I add a non-empty home.js to the entry point. Quite annoying, but at least it works :roll_eyes:

1 Like
3

Thanks for this. Can confirm at the time of writing that this is still an issue.

Added empty JS file with comment to make it work.

4

Hi I went through the same for one week and no luck, my conclusion was to add learning scss to my list

The Fix is
After adding to your Config.json: next add to the setup.php setup the link will explain more

last part is you have to add to the main.scss
@import " ";
with the name of your css file no need to add .css in the import

Rock it brothers