个人中心
gpt4 book ai didi

css - Sass 错误 : no mixin named roboto-family Backtrace: src/pages/forms/forms. scss:5

转载 作者：搜寻专家 更新时间：2023-10-30 21:49:08 25 4
gpt4 key购买 nike

您好，我是 ionic 的新手。我已经开始了一个 ionic 元素。我试图整合一个主题，并为此复制了一个 .html 文件和一个 .scss 文件。我还为此创建了 .ts 文件。

Forms.html

<!DOCTYPE html>
<html>
   <head lang="en">
     <meta charset="UTF-8">
     <title>Title</title>
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
     <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
     <link rel="stylesheet" type="text/css" href="../bower_components/ionic/release/css/ionic.min.css">
     <link rel="stylesheet" type="text/css" href="../dist/css/ionic.material-design-lite.css">
     <script src="../bower_components/ionic/release/js/ionic.bundle.js"></script>
     <script src="../dist/js/ionic.material-design-lite.bundle.js"></script>
     <script src="js/app.js"></script>
  </head>
  <body class="use-material-icons" ng-app="material-starter">
       <div class="bar bar-header bar-assertive">
           <button class="button icon ion-navicon"></button>
           <h1 class="title">Form Elements</h1>
       </div>
       <ion-content class="has-header padding">
           <div class="list">
               <label class="item item-input">
                     <input type="text" placeholder="First Name" class="ng-invalid">
               </label>
               <label class="item item-input item-floating-label input-calm">
                    <span class="input-label">Last Name</span>
                    <input type="text" placeholder="Last Name">
              </label>
              <label class="item item-input input-energized">
                    <span class="input-label">Username</span>
                    <input type="text" ng-model="user">
              </label>
             <label class="item item-input item-stacked-label">
                    <span class="input-label">Email</span>
                    <input type="text">
             </label>
             <label class="item item-input">
                   <textarea placeholder="Comments"></textarea>
             </label>
         </div>

        <div class="list list-inset">
             <label class="item item-input">
                  <input type="text" placeholder="Username">
             </label>
             <label class="item item-input">
                  <input type="password" placeholder="Password">
             </label>
       </div>

       <div class="list">

           <div class="item item-input-inset">
               <label class="item-input-wrapper">
                    <input type="text" placeholder="Email">
               </label>
               <button class="button button-small">
                Submit
               </button>
           </div>
      </div>

      <div class="padding">
          <button class="button button-block button-positive">Submit</button>
       </div>
     </ion-content>
  </body>
</html>

Forms.scss

.platform-android, .platform-override {
.list:not(.card) .item.item-input {
@extend .mdl-textfield;
@extend .mdl-textfield--full-width;
@include roboto-family('Regular', 400);

background: transparent;
border: none;

.input-label {
  @include material-animation-default();
  @include roboto-family('Regular', 400);
}

&.is-focused, &.is-dirty {
  .input-label {
    @include roboto-family('Regular', 400);
    color: $input-text-highlight-color;
    font-size : $input-text-floating-label-fontsize;
    transform: translate3d(0, -20px, 0) scale(1);
    visibility: visible;
  }
}

.input-label {
  bottom: 0;
  color: $input-text-label-color;
  font-size: $input-text-font-size;
  left: 0;
  right: 0;
  pointer-events: none;
  position: absolute;
  top: 26px;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
}

// The after label is the colored underline for the TextField.
&:after {
  background-color: $input-text-highlight-color;
  bottom: $input-text-vertical-spacing;
  content: '';
  height: 2px;
  left: 45%;
  position: absolute;
  visibility: hidden;
  width: 10px;
}

&.is-focused:after {
  left: 0;
  visibility: visible;
  width: 100%;
}

&.is-invalid {
  input, textarea {
    color: $input-text-error-color;
    text-shadow: 0 0 0 $input-text-error-color;
    background-color: transparent;
  }

  &:after {
    background-color: $input-text-error-color;
  }
}

&.is-disabled {
  input, textarea {
    color: $input-text-disabled-color;
    text-shadow: 0 0 0 $input-text-disabled-color;
    background-color: transparent;
    border-bottom: 1px dotted $input-text-disabled-color;
  }
}

input, textarea {
  @extend .mdl-textfield__input;

  text-shadow: 0 0 0 #444;
  color: $input-text-highlight-color;
  -webkit-text-fill-color: transparent;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #444;
  opacity: 0.5;
  text-shadow: none;
  -webkit-text-fill-color: initial;
}

@each $color-name, $color in $color-map {
  &.input-#{$color-name} {
    @include input-focus-color($color);

    input, &.is-focused .input-label, &.is-dirty .input-label {
      color: $color;
    }

  }
}
}
}

Forms.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  templateUrl: 'forms.html'
})
export class FormsPage {

  constructor(public navCtrl: NavController) {

  }

}

当我使用命令 ionic serve 运行时，出现以下错误

Sass 错误

no mixin named roboto-family Backtrace: src/pages/forms/forms.scss:5

我已经在路径中保存了字体

src/www/assets/fonts/roboto

谁能帮我解决这个问题？我缺少哪些东西？

最佳答案

如我所见，有一行说明

@include roboto-family('Regular', 400);

在多个地方。

但是对于要包含的机器人系列，没有定义的值或mixin。

让我举个例子。

mixin 可让您创建要在整个站点中重复使用的 CSS 声明组。你甚至可以传入值来让你的 mixin 更加灵活。 mixin 的一个很好的用途是用于供应商前缀。以下是border-radius 的示例。

    @mixin border-radius($radius) {
      -webkit-border-radius: $radius;
         -moz-border-radius: $radius;
          -ms-border-radius: $radius;
              border-radius: $radius;
        }

.box { @include border-radius(10px); }

要创建一个 mixin，您可以使用 @mixin 指令并为其命名。我们将我们的 mixin 命名为 border-radius。我们还在括号内使用变量 $radius ，这样我们就可以传入我们想要的任何半径。创建混合宏后，您可以将其用作 CSS 声明，以 @include 开头，后跟混合宏的名称。生成 CSS 后，它看起来像这样:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

因此，要使用@include roboto-family，您需要定义一个@mixin roboto-family

希望这能解决您的问题。

引用:For reference and detailed explanation

关于css - Sass 错误 : no mixin named roboto-family Backtrace: src/pages/forms/forms. scss:5，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49144862/

25 4 0
文章推荐： ios - 将 UITableView 方向更改为从右到左
文章推荐： angular - 在 Angular2+ 中，什么时候设置静态变量？
文章推荐： angular - 使用@ngrx/store 时，这是访问类内状态变量的正确方法吗？
文章推荐： python - PySpark - 将 DF 列组合成命名的 StructType
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com