Can't get the CSS files built

[Ali Khallad]

Hi
this is my webpack file content: https://pastebin.com/ybVts8Du
this is the package file content: https://pastebin.com/FXJiHNye

When I try
npm run dev
or
npm run build

it builds the JS but not the CSS, I’m sure that the regex for CSS path is correct which block/css/style/ and block/css/editor-styles/ both folders has css and scss files in them.

Not sure what is wrong, there is no error or anything, and not sure how to debug.

[Zac Gordon]

Hi, when you use the webpack setup and file structure from the course does it work?

[Ali Khallad]

It does work when using with the demo plugin although it produce some errors. However, when trying on my own plugin it doesn’t, I shared the setup above.

[Zac Gordon]

My guess would be it either has to do with the tests (like this test: /block\/css\/editor-styles\/.*\.s?css$/,)

Or it has to do with the Babel config in the buildJS const.

Those would be my guesses as to where the problem exists.

[Ali Khallad]

Not there, all seem to be correct, I tried to copy exact webpack file from gutenberg-course and copied blocks folder, then it generated correctly on my plugin, but after one change to module.exports.entry, I changed the names for JS file and npm run dev again and it generated js but not css, this is a bit confusing.

[Ali Khallad]

After digging a bit, I understood that the other rules of module.export does not search by directory or anything, but rather handles files imported from the main js that is in the entry point I suppose.

How can I make it instead get a whole directory for example block/css/block.css block/css/block.editor.css then build those into the appropriate folder with appropriate names

Now when I run it on ‘blocks/index.js’ it has the import ‘document’ inside it which make the rest of code handles css imported to this js file, when I change to my js file that has no import it run without an issue but my css folder is not generated.

[Author]

Posts