如何确定重置CSS的范围，以便使用scopeResetCSS属性将其应用于Ext组件

Question

如何将Ext-CSS设置为仅应用于Ext组件？

这是scopeResetCSS:的Ext文档中提到的内容

scopeResetCSS : Boolean
True to scope the reset CSS to be just applied to Ext components. 
Note that this wraps root containers with an additional element. 
Also remember that when you turn on this option, you have to use ext-all-scoped 
{ unless you use the bootstrap.js to load your javascript, in which case it will be 
handled for you.

我已经设置了CCD_ 2&也用ext-all-scoped.css替换了ext-all.css，但这无济于事。

Answer 1

感谢Donald Sipe在他的博客中发布了解决方案。

在ext-debug.js脚本加载Ext对象之前，您应该以以下方式创建它：

 <script>
    // Here we define Ext for the first time
    Ext = {
        buildSettings:{
            "scopeResetCSS": true  // Thanks, but I'll do my own scoping please
        }
    };
</script>
<script src="js/libs/ext/4.0.2a/ext-all-debug.js"></script>

通过在buildSettings配置对象中设置scopeResetCSS值，您告诉ExtJS您将自己处理CSS范围。

Answer 2

例如，要获得一个作用域版本，灰色主题：

1. 安装指南针

2. 然后，在命令行上，移动到ExtJs Sass文件夹，例如/extjs/resources/sass

3. 复制文件ext-all-gray.scss

4. 在文件顶部添加行$scope-reset-css: true;。

然后运行：compass compile ext-all-gray-scoped.scss

这将在CSS文件夹中创建一个文件ext-all-gray-scoped.css，您现在可以使用它。