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

本文链接：https://blog.youkuaiyun.com/tiven_/article/details/135929218

在前端开发中，随着项目规模的扩大，特别是在使用 微前端 架构后，基座应用和子应用之间的样式冲突和作用域管理成为了一项挑战。为了解决这个问题，我们可以利用 Vite 构建工具和 PostCSS 插件 postcss-prefix-selector，通过增加统一的作用域前缀来有效地隔离样式，确保样式仅在特定组件或模块中生效。本文将详细介绍如何在 Vite 项目中使用 postcss-prefix-selector 插件，实现样式的统一作用域管理。

vite postcss-prefix-selector

1. 安装 Vite 项目

首先，确保你已经创建了一个基于 Vite 的项目。如果还没有，可以通过以下命令进行初始化：

pnpm create vite my-vite-project
cd my-vite-project
npm install

2. 安装 `postcss-prefix-selector` 插件

在 Vite 项目中使用 PostCSS 插件，需要先安装相关的依赖：

npm install postcss postcss-prefix-selector -D

3. 配置 PostCSS

使用使用以下两种方式之一配置 PostCSS：

在项目根目录下创建 postcss.config.js 文件，配置 PostCSS 插件：

// postcss.config.js

module.exports = {
   
  plugins: [
    // require('postcss-pxtorem')({
   
    //   rootValue: 37.5, //1rem的大小
    //   propList: ['*'], //需要转换的属性
    //   selectorBlackList: ['.norem', '.vc-*'], //过滤掉不需要转换的类名
    //   exclude: /node_modules/i, //过滤掉node_modules文件夹下的文件
    // }),
    require('postcss-prefix-selector')({
   
      prefix: '.my-app'