vue.js 如何在Vite中设置PostCSS嵌套？

olhwl3o2 于 2023-03-13 发布在 Vue.js

关注(0)|答案(2)|浏览(253)

这是我目前所尝试的：
1.通过npm install postcss-nesting --save-dev安装
1.设置虚拟配置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嵌套？

vue.js

来源：https://stackoverflow.com/questions/71778929/how-to-setup-postcss-nesting-in-vite

2条答案

按热度按时间

v9tzhpje1#

我能让它像这样工作：

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

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

赞(0）回复(0）举报 2023-03-13

6yt4nkrj2#

只需在项目的根目录下创建一个名为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: {},
  }
}

尾风文件：筑巢

赞(0）回复(0）举报 2023-03-13

我来回答

vue.js 如何在Vite中设置PostCSS嵌套？

2条答案

相关问题

热门标签

最新问答