vite + postcss-prefix-selector 增加统一作用域




// vite.config.js
import { defineConfig } from 'vite';
import postcssPrefixSelector from 'postcss-prefix-selector';
 
export default defineConfig({
  plugins: [
    // 自定义插件，用于给所有选择器添加统一的作用域
    (context) => {
      // 只在生产模式下添加前缀
      if (context.command === 'build') {
        return {
          async postcss(postcss) {
            // 使用postcssPrefixSelector插件，并传入前缀选项
            return postcss.use(postcssPrefixSelector({ prefix: '.app ' }));
          },
        };
      }
    },
  ],
});

这段代码演示了如何在Vite项目中使用postcss-prefix-selector插件来给所有CSS选择器添加统一的作用域（例如.app）。只在生产构建中添加前缀，以确保开发过程中不会受到影响。这是一个简化版本的实际使用示例，可以直接用于Vite项目中。

vite + postcss-prefix-selector 增加统一作用域

评论已关闭

推荐阅读