Question

我在离子卡中定义了一个标题。在这里，我正在展示一个标志。由于我使用了内联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;
                 }
              }

        }

使用data bindings：

html的

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

.TS

myImage:string="";

constructor(){}

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

如何通过scss文件在离子3中应用自定义css规则

1 个答案: