How to get postcss config working with Nuxt?

Question

My Nuxt project doesn't pick up the config for postcss-import from nuxt.config.ts:

build: {
    postcss: {
        plugins: {
            "postcss-import": {
                path: ["../assets/css", "../components/@css", "../components"]
            }
        }
    }
}

I get an error like Error: Can't resolve 'style.css' in /projectroot/pages.

The same config in postcss.config.js is picked up properly. To test, if I change postcss.config.js to point to non-existing directories, the error becomes: Error: Failed to find 'style.css' in [list of configured directories].

What should I do to get this working from nuxt.config.ts? Note that I'm using Typescript (nuxt-ts).

Answer 1

I had a file called postcssrc.js

    "plugins": {
          "postcss-import": {},
          "postcss-url": {},
          // to edit target browsers: use "browserslist" field in package.json
          "autoprefixer": {}
          }

I deleted it and in the file nuxt.config.js add the next code:

        build: {
        postcss: {
          plugins: {
          "postcss-import": {},
          "postcss-url": {},
          // to edit target browsers: use "browserslist" field in package.json
          "autoprefixer": {}
          }
        }
      }

Then in the package.json I ran the scripts:

"build":"nuxt build"

Answer 2

This is how I use it:

I import a css file as usual and add postcss config on the build property of nuxt.config.js

  css: ['~/assets/css/tailwind.css'],
  build: {
    postcss: {
      plugins: {
        'postcss-import': true,
      }
    }
  }

From NuxtJS docs

With this config I can also use the <style lang="postcss"> tag inside Vue files.