Sage 9 postCSS issue

sage
1

Hi there,

Just after installing of sage started theme using Tailwind as an option I’m getting the following issue.

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? }

Tried to downgrade postcss-loader but doesn’t work.

Can you please advise?

2

The most recent sage version 9.0.10 has had issues with dependences. Not sure if what you’ve experienced falls into the same bucket, but you might want to try with a clean 9.0.9.

3

What version are you using for the following:

  • Sage
  • Node
4

Thank you! I’ll try.

5

I’m use

Sage 9.0.10
Node 10.17.0

6

I would try w/ the current LTS release of node, which is 14.x. I recommend using nvm or volta to manage multiple Node versions, if you aren’t already.

8

Thank you! I’ve tried node 14.15.0, and still the same

9
10

Ensure that in your webpack.config.preset.js postcss loader object looks like this:

{
          loader: 'postcss',
          options: {
            postcssOptions: {
              parser: config.enabled.optimize
                ? 'postcss-safe-parser'
                : undefined,
              plugins: postcssPlugins,
              sourceMap: false,
            },
          },
        },

Notice postcssOptions

11

So is postcss.config.js totally ignored?
Have we to put all plugin configuration into webpack.config.preset.js?

Also, the purge Tailwind option in tailwind.config.js seems to be ignored too, do you have any hint about this?

12

I got the same issue. When I install tailwindcss, it just doesn’t work.

I got this error:
```
ERROR Failed to compile with 1 errors 04:44:53

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? }

I’ve literally followed the setps for the default installation, and it doesn’t work.

I’ve tried a few things, re-installed this 5times already, nothing seems to work.

In main.scss file, when I hover over: @tailwind utilities; - it says “unknown at rule @tailwind”.

I’m not sure what to do.

13

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