这是一个创建于 1571 天前的主题，其中的信息可能已经有所发展或是发生改变。
我的 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 2021-09-11 19:07:42 +08:00 via Android  1 放弃 js，用一套更阳间的 css 处理系统，比如 Sass/SCSS |
 | 2 xell 2021-09-11 19:41:29 +08:00 1 你真要这么做的话，就去找一个现成的 js 可用的 css 解析器，例如 https://www.npmjs.com/package/cssparser，然后事情就比较简单了。 |
 | 3 troywith77 2021-09-11 20:00:28 +08:00 1 转成 AST 之后随你怎么玩 https://codesandbox.io/s/csstree-add-selector-r147r |
 | 4 villivateur 2021-09-11 20:21:06 +08:00 1 直接用正则匹配？ 大概就是 把 ^([\w\d]+{\w+:\w+}) 替换成 .aaa $1 |
 | 5 newbieRenew 2021-09-11 20:53:44 +08:00 via iPhone 1 用啥正则，直接复制丢到 scss 里 ，套一层就行了 .aaa{ h1{…} div{…} } |
 | 6 shapl 2021-09-11 23:14:35 +08:00 1 预处理器吖。。。scss 、less 、、、都行。 |
| 7 shapl 2021-09-11 23:19:08 +08:00 1 如果你不想依赖 npm 、不想侵入项目去改动。 我推荐你使用 vscode 的插件，Easy LESS 编辑 *.less，会在指定目录输出 *.css ``` { "less.compile": { "compress": false, //是否压缩 "sourceMap": false, //是否生成 map 文件，有了这个可以在调试台看到 less 行数 "out": "../css/", //是否输出 css 文件，false 为不输出 "outExt": ".css", //输出文件的后缀,小程序可以写'wxss' }, } ``` |
Select Language