自定义组件 sccs 未在 ionic 5 中加载

Posted 2023-03-13

【中文标题】自定义组件 sccs 未在 ionic 5 中加载

【英文标题】：Custom component sccs not loaded in ionic 5

【发布时间】：2021-08-12 20:08:00

【问题描述】：

我在 ionic 5 中创建了一个自定义组件，步骤如下。

第一步：创建组件ionic g component components/FlashCard

第 2 步：为此组件创建一个模块。 ionic g module components/FlashCard

第 3 步：将FlashCardComponent 导入到 flash-card.module.ts 文件中。

第 4 步：在所需页面的 module.ts 文件中导入FlashCardModule。

这是我采取步骤的帖子：Ionic 4 custom components

我在组件中有一些自定义的 sccs 代码：

  .ios, .md 

    flash-card 

      

        /* entire container, keeps perspective */
        .flip-container 
            perspective: 1000px;
        

            /* flip the pane when hovered */
            .flip-container.flipped .flipper 
                transform: rotateY(180deg);
            

        .flip-container, .front, .back 
            width: 90vw;
            height: 40vh;
            margin: 20px auto;
        

        /* flip speed goes here */
        .flipper 
            transition: 0.6s;
            transform-style: preserve-3d;

            position: relative;
        

        /* hide back of pane during swap */
        .front, .back 
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ecf0f1;
            backface-visibility: hidden;
            -webkit-box-shadow: 0px 8px 4px -4px rgba(163,163,163,0.25);
            -moz-box-shadow: 0px 8px 4px -4px rgba(163,163,163,0.25);
            box-shadow: 0px 8px 4px -4px rgba(163,163,163,0.25);
            border: 1px solid #dee2e3;
            margin: 0;
            position: absolute;
            top: 0;
            left: 0;
        

        /* front pane, placed above back */
        .front 
            z-index: 2;
            /* for firefox 31 */
            transform: rotateY(0deg);
        

        /* back, initially hidden pane */
        .back 
            transform: rotateY(180deg);
        

    

这就是我在所需页面中调用自定义组件的方式：

<app-flash-card>

    <div class="flash-card-front">FRONT</div>

    <div class="flash-card-back">BACK</div>

</app-flash-card>

当我运行 ionic serve 时，我看不到我的 scss 代码的样式。我的谷歌浏览器开发工具没有错误。

如何激活自定义组件的样式？

更新：

flash-card -> app-flash-card

【参考方案1】：

您的组件名为 app-flash-card，但您的 scss 文件声明了 flash-card。所以更新它可能会有所帮助：

 .ios, .md 

    app-flash-card 

好的，我看了教程，有点不对劲。我在这里和那里修复了这些位，这是fixed stackblitz

基本上改变了这部分

 .ios, .md 

    flash-card 

到

:host 

【讨论】：

您好@eko，感谢您的宝贵时间。我已经更新了我的 scss 文件，但我没有看到样式。我会上传截图。

我在您的 scss 和 html 中没有看到任何匹配的样式。你的 html 有 flash-card-front 类，但你的 scss 没有

我已按照本教程进行操作，但这是基于 Ionic 2 和 3 我已尝试将其转换为 Ionic 5：joshmorony.com/build-a-custom-flash-card-component-in-ionic-2

我认为您没有正确遵循本教程。我将尝试创建一个 stackblitz，以便您可以复制它

组件在app/flash-card下，在主页pages/home/home.html下使用