Question

我的Nuxt项目没有从nuxt.config.ts中获取postcss导入的配置：

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

我有一个名为 postcsssrc.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"

如何获得与Nuxt一起使用的postcss配置？

2 个答案: