webpack配置css module，:global失效问题原因

css-loader配置如下，localIdentName官方推按照荐配置，可以有效提升开发环境编译速度：

{
            loader: "css-loader", 
            options: {
              // 启用 css modules 
              modules: {
                localIdentName: process.env.NODE_ENV==='production'?'[hash:base64]':'[path][name]__[local]' // 指定样式名,加快本地开发编译速度
              },
            },
          },

官方推荐：

image.png

导致:global语法失效的情况：

引入的css如下：

import styles from './style.css';

//style.css
:global(.active){
    color:red;
}

当styles变量未被使用时，webpack5自带tree shaking优化，导致style.css不会被打包，也就不会生效，解决方法：

1. 将全局global样式集中到global.css中，引入后将styles赋值给一个变量
2. style.css中加入被使用的local样式，避免tree shaking