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项目中。
评论已关闭