CSS files not compiling

[stuartcusackie]

Hello,

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": [
  "./scripts/main.js",
  "./styles/main.scss",
  "../../../../plugins/contact-form-7/includes/js/scripts.js",
  "../../../../plugins/contact-form-7/includes/css/styles.css",
  "../../../../plugins/contact-form-7/includes/css/styles-rtl.css"
]

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.

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.

[MWDelaney]

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.

[stuartcusackie]

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.