怎么给一个 css 文件里的每个 selector 添加一个前缀 .aaa

[find456789]

我的 css 文件如下：

h1{color:red}
div{color:red}
p{color:red}
h4{color:red}

我用 js 读取到了这个 css 文件

我想给这个 css 里的每个选择器，加一个前缀，变成这样

 .aaa  h1{color:red}
 .aaa  div{color:red}
 .aaa  p{color:red}
 .aaa  h4{color:red}

我这样做的目的是，不想破坏全局样式，只想让这些样式应用在 .aaa 这个 class 里

想问问大家， 怎么用 js 添加前缀呢？

因为 css 文件里，的 选择器 每个页面都不同， 所以 要用 js 来动态改， 我想到的方案是用 正则

但我尝试了好久， 都没有解决

特来请教大家

谢谢

[iBugOne]

放弃 js，用一套更阳间的 css 处理系统，比如 Sass/SCSS

[xell]

你真要这么做的话，就去找一个现成的 js 可用的 css 解析器，例如 https://www.npmjs.com/package/cssparser，然后事情就比较简单了。

[troywith77]

转成 AST 之后随你怎么玩 https://codesandbox.io/s/csstree-add-selector-r147r

[villivateur]

直接用正则匹配？

大概就是
把 ^([\w\d]+{\w+:\w+})
替换成 .aaa $1

[newbieRenew]

用啥正则，直接复制丢到 scss 里 ，套一层就行了

.aaa{
h1{…}
div{…}
}

[shapl]

预处理器吖。。。scss 、less 、、、都行。

[shapl]

如果你不想依赖 npm 、不想侵入项目去改动。
我推荐你使用 vscode 的插件，Easy LESS
编辑 *.less，会在指定目录输出 *.css

```
{
"less.compile": {
"compress": false, //是否压缩
"sourceMap": false, //是否生成 map 文件，有了这个可以在调试台看到 less 行数
"out": "../css/", // 是否输出 css 文件，false 为不输出
"outExt": ".css", // 输出文件的后缀,小程序可以写'wxss'
},
}
```