如何在Vite中设置PostCSS嵌套？

Question

这是我到目前为止尝试过的：

\n

\n

1. 通过安装npm install postcss-nesting --save-dev

   \n
\n

2. 设置 vite.config.js：

   \n
\n

\n

import { fileURLToPath, URL } from 'url';\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport postcssNesting from 'postcss-nesting';\n\nexport default defineConfig({\n    plugins: [\n        vue(),\n        postcssNesting\n    ],\n  \n    resolve: {\n        alias: {\n            '@': fileURLToPath(new URL('./src', import.meta.url))\n        }\n    }\n});\n

\n

但它\xe2\x80\x99s 不起作用。设置 PostCSS 以便我可以使用 CSS 嵌套的正确方法是什么\xe2\x80\x99？

\n

Answer 1

我能够让它像这样工作：

import { defineConfig } from "vite";
import postcssNesting from 'postcss-nesting';

export default defineConfig({
    css: {
        postcss: {
            plugins: [
                postcssNesting
            ],
        },
    },
});

Answer 2

只需在项目的根目录下创建一个名为postcss.config.js：

module.exports = {
  plugins: {
    'postcss-nesting': { /* plugin options */ },
  },
}

Vite 使用postcss-load-config这意味着它可以获取 postcss 配置文件（文件名可以是该包支持的多种格式之一postcss.config.js，例如.postcssrc、.postcssrc.js等）。

如果您想像在 SASS 中一样使用 PostCSS 进行嵌套，我建议您使用postcss-nested。

如果您想将它与 TailwindCSS 一起使用，则不必安装它，因为它直接包含在包tailwindcss本身中：

// postcss.config.js
module.exports = {
  plugins: {
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  }
}

TailwindDocs：嵌套