Css 在现有类中实现ECS。如何添加前缀？

我想在我的chrome扩展中使用MaterializeCS。 该扩展为gmail添加了一些功能。不幸的是，ECS似乎干扰了gmail的风格。是否可以隔离物化css的作用域或向类添加自定义前缀

我目前在manifest.json中导入css

"content_scripts": [
    {
      "matches": ["*://mail.google.com/*"],
      "css": [
        "vendor/materializecss/materialize.min.css"
      ],
...

---

如果不重写整个框架（scss文件）或使用范围有限的stlyes，就不能这样做。

有

gulp class prefix

插件作为CSS类的前缀。这是配置文件

var gulp = require('gulp'),
    classPrefix = require('gulp-class-prefix');

gulp.task('prefix', function () {
    return gulp.src('SOURCE_OF_CSS_FILE')
        .pipe(classPrefix('YOUR_PREFIX'))
        .pipe(gulp.dest('DESTINASTION_FOLDER'));
});

gulp.task('default', ['prefix']);

但这将只作为CSS文件的前缀，并且只适用于不需要包含JS的组件。对于动态组件，您需要在materializecss.js文件中进行更改

更新

---

我知道了。此脚本是为引导而设计的。但无论如何，这也适用于ECS（70%-80%）。您只需更改it主功能中的文件名即可，即用materializecss替换引导

不可以。您必须手动修改CSS文件，或者使用iframe或范围样式元素。搜索显示如何隔离样式的答案。我使用gulp插件添加了前缀。但这只解决了css文件，如何更新JS文件？有什么想法吗？