JavaScript for WordPress Forums Gutenberg Development Can't get the CSS files built

This topic contains 5 replies, has 2 voices, and was last updated by  Ali Khallad 4 months, 4 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #107948

    Ali Khallad
    Participant

    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.

    #107976

    Zac Gordon
    Keymaster

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

    #107982

    Ali Khallad
    Participant

    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.

    #107983

    Zac Gordon
    Keymaster

    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.

    #107997

    Ali Khallad
    Participant

    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.

    #107998

    Ali Khallad
    Participant

    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.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.