How to fix “Module build failed (from ./node_modules/postcss-loader/src/index.js)”

Question

I'm getting this error when I try to run my app, I'm using all the same dependencies that I always use so I'm very baffled by this.

Warn in

in ./assets/css/style.css

Module Warning (from ./node_modules/postcss-loader/src/index.js):
(13:3) start value has mixed support, consider using flex-start instead friendly-errors 18:06:28 @ ./assets/css/style.css @ ./.nuxt/App.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

what should i do?

Answer 1

build: {
    postcss: {
      preset: {
        features: {
          // Fixes: https://github.com/tailwindcss/tailwindcss/issues/1190#issuecomment-546621554
          "focus-within-pseudo-class": false
        }
      },
    },
}

Answer 2

I also met this warn:

start value has mixed support, consider using flex-start instead

Although the warning message can be ignored,but it makes me unwell.

finally, i find a reasonable answer here, the point is flex-direction vs writing-mode direction

1. flex-start (default): items are packed toward the start of the flex-direction.
2. flex-end: items are packed toward the end of the flex-direction.
3. start: items are packed toward the start of the writing-mode direction.
4. end: items are packed toward the end of the writing-mode direction.