PostCSS Loader has been initialized using an options object that does not match the API schema

sage
1

I tried setting up sage 9.0.10 version with tailwind as my default css framework.
But I got into an error " No files matching the pattern .s?(c|a)ss" were found on Sage" this answer from stackoverflow helped and I was able to yarn start.

But I got some more errors.

 error  in ./resources/assets/styles/main.scss

Module build failed: ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'plugins'. These properties are valid:
   object { postcssOptions?, execute?, sourceMap?, implementation? }
    at validate (D:\wp-local\checkout\wp-content\themes\sage-acf-boilerplate\node_modules\schema-utils\dist\validate.js:104:11)
    at Object.loader (D:\wp-local\checkout\wp-content\themes\sage-acf-boilerplate\node_modules\postcss-loader\dist\index.js:43:29)

 @ ./resources/assets/styles/main.scss 2:14-357 21:1-42:3 22:19-362
 @ multi ./resources/assets/build/util/../helpers/hmr-client.js ./scripts/main.js ./styles/main.scss

How can I solve this ?

2

You may want to try the Sage 9.x update branch that updates a lot of dependencies and fixes most if not all build issues:

3

Hey tried the new setup.

I am getting a bunch of

 36:1  ×  Unexpected invalid position @import rule   no-invalid-position-at-import-rule

from main.scss

Do i put all my imports before @tailwinds/base ?

4

I have just added this on top of my main.scss file

/* stylelint-disable no-invalid-position-at-import-rule */

Is this the correct way to do it ?

5

You can disable it like this, but you can also use the stylelintrc config file:

But you may should think about fixing this as it is bad practice (stylelint should notify about these)

6

Hey the error came with default install of sage.

/* stylelint-disable no-invalid-position-at-import-rule */

/**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 */
@tailwind base;

/** Import variables */
@import "common/variables";

/** Import everything from autoload */
@import "./autoload/**/*";

/**
 * Import npm dependencies
 *
 * Prefix your imports with `~` to grab from node_modules/
 * @see https://github.com/webpack-contrib/sass-loader#imports
 */
// @import "~some-node-module";

/**
 * This injects any component classes registered by Tailwind plugins.
 */
@tailwind components;

/** Import theme styles */
@import "components/buttons";
@import "components/comments";
@import "components/forms";
@import "components/wp-classes";
@import "layouts/header";
@import "layouts/sidebar";
@import "layouts/footer";
@import "layouts/pages";
@import "layouts/posts";
@import "layouts/tinymce";

/**
 * This injects all of Tailwind's utility classes, generated based on your
 * config file.
 */
@tailwind utilities;

Should I reorder these ?

7

Well, in this case it is a tailwind-specific approach for pulling in more dependencies.

So I don’t think that you have to reorder something, but rather ignore that stylint rule for these parts.

If you have issues with @tailwind, see this discussion for specifically configuring the linter to ignore these as errors:

1 Like
8

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