Nextjs 配置与 postcss 嵌套不起作用

Question

我正在将nextjs与tailwindcss一起使用，并且在将postcss嵌套添加到我的nextjs应用程序中时遇到了困难。

以下是相同的配置：

next.config.js

const withPlugins = require("next-compose-plugins");
module.exports = withPlugins([], {});

postss.config.js

module.exports = {
  plugins: [
    "postcss-import",
    "tailwindcss",
    "autoprefixer",
    "tailwindcss/nesting",
    "postcss-nested",
  ],
};

tailwind.config.js

module.exports = {
  purge: {
    enabled: true,
    content: [
      "./pages/**/*.{js,ts,jsx,tsx}",
      "./src/components/**/*.{js,ts,jsx,tsx}",
    ],
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
};

在我的自定义css文件中，我试图像一样使用它

.toolbar_navigation_items {
  li {
    @apply text-3xl;
  }
}

然后我得到错误

"(2:3) Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.

注意：我还尝试将postss.config.js更改为

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss/nesting'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

正如文件中提到的，但上面写着

A PostCSS Plugin was passed as a function using require(), but it must be provided as a string.

Answer 1

我有同样的问题

1. 安装后处理嵌套：npm install -D postcss-nesting

2. postss.config.js:

module.exports = {
  plugins: {
    "tailwindcss/nesting": "postcss-nesting",
    tailwindcss: {},
    autoprefixer: {},
  },
};

https://tailwindcss.com/docs/using-with-preprocessors#nesting

Answer 2

也有同样的错误。使用时：

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss/nesting'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

获得此链接：https://nextjs.org/docs/messages/postcss-shape

它显示了应该如何编写新的配置(删除包装字符串的require('package')函数(。新postss.config.js:

module.exports = {
    plugins: [
        'postcss-import',
        'tailwindcss/nesting',
        'tailwindcss',
        'autoprefixer',
    ]
}

这为我修复了嵌套配置问题。

Answer 3

报价：

npm i sharp
# or
yarn add sharp

https://nextjs.org/docs/messages/install-sharp