html - 如何通过 scss 文件在 ionic 3 中应用自定义 css 规则

Question

我已经在 ion-card 中定义了一个标题。在这里，我展示了一个标志。因为我使用了内联 CSS，所以代码运行良好，但我仍然认为样式应该保存在不同的文件中，所以我将样式移动到 .scss 文件，但发生的事情是样式没有应用于元素。

这是我的login.scss代码

page-login
        {
            ion-grid
                {
                    min-height: 100% !important;
                }
            .login-logo
                {
                    background-color: transparent;
                    display: block;
                    margin: auto;
                    height: 100px;
                    width: 100px;
                    src: url(assets/logo.png);
                }
        }

这是HTML代码

<ion-content>
        <ion-grid ion-fixed>
            <ion-row>
              <ion-col col-12>
                <ion-list>
                    <ion-card>
                        <ion-card-header>
                            <ion-img class="login-logo" alt="Text"></ion-img>
                        </ion-card-header>
                    </ion-card>
                </ion-list>
               </ion-col>
            </ion-row>
        </ion-grid>
    </ion-content>

我不知道为什么没有显示图像。

Answer 1

您需要按如下方式构建它。

注意:这样使用:./assets/logo.png

.scss

page-login
        {
            ion-grid
                {
                  min-height: 100% !important;

                .login-logo
                {
                    background-color: transparent;
                    display: block;
                    margin: auto;
                    height: 100px;
                    width: 100px;
                 }
              }

        }

使用数据绑定(bind):

.html

 <ion-img class="login-logo" alt="Text" [src]="myImage"></ion-img>

.ts

myImage:string="";

constructor(){}

this.myImage="./assets/logo.png";