如何让postcss配置与Nuxt一起工作？

Question

我的Nuxt项目没有从nuxt.config.ts获取postcss-import的配置：

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

我得到一个像Error: Can't resolve 'style.css' in /projectroot/pages这样的错误。

正确提取postcss.config.js中的相同配置。为了进行测试，如果我将postcss.config.js更改为指向不存在的目录，则错误变为：Error: Failed to find 'style.css' in [list of configured directories]。

我应该怎么做才能让这个在nuxt.config.ts中正常工作？注意，我使用的是Typescript (nuxt-ts)。

Answer 1

我是这样使用它的：

我像往常一样导入css文件，并在nuxt.config.js的build属性上添加postcss配置。

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

From NuxtJS docs

有了这个配置，我还可以在Vue文件中使用<style lang="postcss">标记。

Answer 2

我有一个名为postcssrc.js的文件

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

我删除了它，并在文件nuxt.config.js中添加了以下代码：

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

然后在package.json中，我运行了脚本：

"build":"nuxt build"