我的 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 来动态改， 我想到的方案是用 正则
但我尝试了好久， 都没有解决
特来请教大家
谢谢
 |
1
iBugOne Sep 11, 2021 via Android  1
放弃 js，用一套更阳间的 css 处理系统，比如 Sass/SCSS
|
 |
2
xell Sep 11, 2021 1
你真要这么做的话，就去找一个现成的 js 可用的 css 解析器，例如 https://www.npmjs.com/package/cssparser，然后事情就比较简单了。
|
 |
3
troywith77 Sep 11, 2021 1
转成 AST 之后随你怎么玩 https://codesandbox.io/s/csstree-add-selector-r147r
|
 |
4
villivateur Sep 11, 2021 1
直接用正则匹配？
大概就是 把 ^([\w\d]+{\w+:\w+}) 替换成 .aaa $1 |
 |
5
newbieRenew Sep 11, 2021 via iPhone 1
用啥正则，直接复制丢到 scss 里 ，套一层就行了
.aaa{ h1{…} div{…} } |
 |
6
shapl Sep 11, 2021 1
预处理器吖。。。scss 、less 、、、都行。
|
|
7
shapl Sep 11, 2021 1
如果你不想依赖 npm 、不想侵入项目去改动。
我推荐你使用 vscode 的插件，Easy LESS 编辑 *.less，会在指定目录输出 *.css ``` { "less.compile": { "compress": false, //是否压缩 "sourceMap": false, //是否生成 map 文件，有了这个可以在调试台看到 less 行数 "out": "../css/", // 是否输出 css 文件，false 为不输出 "outExt": ".css", // 输出文件的后缀,小程序可以写'wxss' }, } ``` |
Select Language