sass - 无法使用 predix px-button-group-design 组件

问题描述

我正在根据文档 https://www.predix-ui.com/#/css/visual/buttons/px-button-group-design使用 px-button-group 设计组件我安装了我正在使用 predix webapp 的组件starter（1.0.46 发行版）作为我的应用程序中的参考应用程序。

在我的项目级别中，我们有 index-inline.scss 和 seed-theme.scss 并且我们在元素文件夹中也有 scss 文件，例如在种子应用程序文件夹中我们在种子页脚下有 seed-app.scss 我们有种子页脚.scss 。

对于我们的项目要求，我们在相同的元素文件夹中创建了一些更多的自定义聚合物元素。我们在视图文件夹下有 rmd-view.html，在 rmd-view 中，我们使用我们创建的这些自定义聚合物元素，如转子视图等，并且我们使用相同的 seed-app.html 导航页面.

在转子视图中，我们想使用 px-button-group 设计组件，我安装了组件并在对象层的 index-inline.scss 中使用下面的代码（根据https://github.com/predixdesignsystem/px-getting-开始#import-order )

$inuit-btn-group-background : #09819c;
$inuit-btn-disabled-border : true;
@import "px-button-group-design/_objects.button-group.scss";

并在rotor-view.html中包含如下的px-butto-group代码

<div class="btn-group">
  <input id="id1" name="btn-group" type="radio">
  <label for="id1" class="btn">Label 1</label>
  <input id="id2" name="btn-group" type="radio">
  <label for="id2" class="btn">Label 2</label>
</div>

但它没有工作然后我尝试在seed-app.scss中使用导入然后我也没有工作然后尝试在转子视图文件夹（位于元素文件夹内）中创建名为rotor-view.scss的新scss文件也不适用于上述所有情况，我得到了 html 单选按钮，没有按钮组 css 应用于上述更改。

为了进行测试，我尝试在我的 seed-app.html 中使用 px-button-group-design html 代码，然后我得到了正确的按钮，但我想在转子视图中使用，看起来我没有在正确的位置使用 scss 导入。

如果我想在转子视图中使用 px-button-group-design ，任何人都可以建议我。我应该在哪个 scss 文件中导入按钮组 scss ？

标签： sasspolymer-1.0predix

如果要在 seed-app.html 组件中使用 px-button-group，请将其添加到 .scss 文件中，该文件会为 seed-app.html 组件生成样式。如果您想在子组件的 px-button-group 中使用 px-button-group，请将其添加到为该组件生成样式的 .scss 文件中。不要忘记导入样式

<link rel="import" href="../my-styles.html">

并且还包括 DOM 中的样式

<style include="my-styles"></style>

希望这可以帮助。

sass - 无法使用 predix px-button-group-design 组件

问题描述

解决方案

推荐阅读