Question

我正在尝试将Ionic App转换为PWA。（离子4，类型=角度）。

我完全遵循了tutorial，而我遇到的唯一问题是实现SCSS。

以下代码用于登录页面。

我的问题：当我使用不带CSS的Firebase托管部署应用程序时，html元素显示完美。但是使用scss时，什么都没有显示！有白屏的死亡...

现在，我的login.ts文件如下：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

login.page.scss中的SCSS（我读过这个doc和这个SOF answer，但显然没有用）：

@import url('https://fonts.googleapis.com/css?family=Poppins:bold');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');

// Colors
$primary: #3c4857;
$primary: black;
$pink: #FED5C8;
$grey: #5a6169;
$dark: #323942;
$pg-bckgrnd: rgb(153, 135, 135);

//fonts
$font: 'Source Sans Pro';

    p {
        font-family: $font;
        font-size: 40px;
        color: $primary;
        font-weight: 700;
        margin-top: 70px;
        margin-left: 10px;
    }
    #sub {
        margin-left: 13px;
        font-family: $font;
        font-size: 17px;
        color: $grey;
        margin-top: -30px;
    }
    #master{
    background-color: $pg-bckgrnd;
    }
    #close {
        background-color: $pg-bckgrnd;
        color: $primary;
        float: left;
        position: absolute;
        font-size: 25px;
        top: 0px;
        left: 3px;
    }
    .title {
        text-align: left;
        font-family: $font;
        font-weight: bold;
        font-size: 17px;
        letter-spacing: 1px;
        background-color: $pg-bckgrnd;
        color: black;
    }
    .button {
        display: table;
        margin: 0 auto;
        border-radius: 4px;
        margin-top: 27px;
        button {
            font-family: $font;
            letter-spacing: 2px;
            width: 280px;
            height: 50px;
            display: block;
        }
    }
    .list {
        background-color: $pg-bckgrnd;
        padding-top: 10px;
        margin-left: -10px;
        ion-item {
            padding-top: 20px;
            background-color: $pg-bckgrnd;
        }
    }

最后是login.page.html文件：

<ion-content id="master" padding>
  <button icon-only clear id="close" ion-button navPop><ion-icon name="close"></ion-icon></button>

  <p>Login</p>
  <p id="sub">Welcome back! Let's get to it.</p>

    <div class="list">
      <ion-item>
        <ion-input class="title" type="email" placeholder="Email Address"></ion-input>
      </ion-item>
    
      <ion-item>
        <ion-input class="title" placeholder="Password" clear-input type="password"></ion-input>
      </ion-item>
    </div>
    
    <div class="button"><button ion-button>LOGIN</button></div>
</ion-content>

如何在PWA（离子角）中正确使用SASS？

0 个答案: