Vue：如何在 Vite 中设置 PostCSS 嵌套？

Question

这是我目前尝试过的方法：

通过 npm install postcss-nesting --save-dev
安装
设置vite.config.js:

import { fileURLToPath, URL } from 'url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import postcssNesting from 'postcss-nesting';

export default defineConfig({
    plugins: [
        vue(),
        postcssNesting
    ],
  
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
});

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

谢谢！

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: Nesting

Vue：如何在 Vite 中设置 PostCSS 嵌套？

Vue: How to setup PostCSS nesting in Vite?

installation

vue.js

postcss

vuejs3

vite