如何让 postcss 配置与 Nuxt 一起使用？答案

【问题标题】：How to get postcss config working with Nuxt?如何让 postcss 配置与 Nuxt 一起使用？
【发布时间】：2019-08-11 06:35:05
【问题描述】：

我的 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)。

【问题讨论】：

我没有使用 postcss，但在我的 nuxt 配置中，我在引用文件夹时使用了~。例如："~/plugins/stackify"。尝试用“~”替换“..”
感谢您的评论。是的，我试过了，但这并没有解决它。使用 postcss.config.js 时，错误消息会指示它尝试的目录列表，但使用 nuxt.config.ts 时不会。它似乎没有拿起配置。

标签： postcss nuxt.js postcss-import

【解决方案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"> 标签。

【讨论】：

【解决方案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"

【讨论】：