CSS files not compiling


I am having problems with the CSS from the Contact Form 7 plugin.

I have installed it using wpackagist and I have removed the default css and js files from being injected like so:

add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );

I am then adding the css and js to my manifest in config.json like so:

"main": [

The JavaScript file compiles fine but the CSS files have trouble. I see nothing strange contained in the CSS files and I have also tried to do an @import in main.scss, which results in a similar error.

    Module parse failed: Unexpected token (1:25)
    You may need an appropriate loader to handle this file type.
    span.wpcf7-not-valid-tip {
          direction: rtl;

Alternatively, using @import in main.scss like so

@import "../../../../../plugins/contact-form-7/includes/css/styles.css";
@import "../../../../../plugins/contact-form-7/includes/css/styles-rtl.css";

Results in:

Module build failed: ModuleParseError: Module parse failed: Unexpected character '' (1:6)

Any ideas? For the moment I am just going to copy and paste the css from contact form 7 into my main.scss file.

I don’t plan to use a contact form plugin in future but I may need to compile CSS files for some reason or other.

You might get a more specific error if you try to run yarn start rather than yarn build. My guess is that the CF7 CSS isn’t up to Sage’s stylelint standards.

Cheers. Yeah, the css code doesn’t pass the lint test if I copy and paste it over but if use the other two methods then I don’t see the specific lint errors, even when using yarn start.

I did notice a weird character popping up. One that I can’t copy and paste here. See screenshot:


I wonder if the css CF7 files are saved in a strange format or something…

Anyway, no big deal, the CF7 styles do very little anyway.

This topic was automatically closed after 42 days. New replies are no longer allowed.