When adding my custom scss to config.json
it doesn’t get properly injected by the webpack hot module replacement with yarn watch
. I know that it I get a 404 in the browser and that is ok behaviour.
I’ve checked that it is properly compiled by webpack, and that’s the case. It is even reloading the page when I change the file, but somehow it doesn’t actually inject my scss.
It works when I run yarn build
, as then it just places the compiled css into the dist folder. Another solution is to import it in main.scss, but I do not prefer that really. Am I missing something obvious?
My config.json:
{
"entry": {
"main": [
"./scripts/main.js",
"./styles/main.scss"
],
"customizer": [
"./scripts/customizer.js"
],
"blockexample": [
"./scripts/blocks/example.js",
"./styles/blocks/example.scss"
]
},
"publicPath": "/wp-content/themes/xxxxxx",
"devUrl": "http://localhost:8888",
"proxyUrl": "http://localhost:3333",
"cacheBusting": "[name]_[hash:8]",
"watch": [
"app/**/*.php",
"config/**/*.php",
"resources/views/**/*.php"
]
}
And my php injection:
add_action( 'init', function () {
if ( ! function_exists( 'register_block_type' ) ) {
// Gutenberg is not active.
return;
}
wp_register_script(
'gutenberg-examples-05-esnext',
asset_path('scripts/blockexample.js'),
['wp-blocks', 'wp-element', 'wp-editor', 'underscore'],
null
);
wp_register_style(
'gutenberg-examples-05-esnext',
asset_path('styles/blockexample.css'),
false,
null
);
register_block_type( 'gutenberg-examples/example-05-recipe-card-esnext', [
'style' => 'gutenberg-examples-05-esnext',
'editor_script' => 'gutenberg-examples-05-esnext',
]);
});
Edit: related? Managing SCSS themes with Webpack - #18 by benword
Edit 2: I t was indeed this issue listed above. I solved it by using laravel-mix, as also now used in Sage 10… If anyone wants to know how I did it, just reply to this thread