css - Error de Sass: no hay un mixin llamado roboto-family Rastreo: src/pages/forms/forms.scss:5

Hola, soy completamente nuevo en Ionic. He comenzado un proyecto de Ionic. Estaba tratando de integrar un tema y copié un archivo .html y un archivo .scss para eso. También creé un archivo .ts para eso.

Formularios.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>

Formularios.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) {

  }

}

Y cuando ejecuto usando el comando ionic serve me da el siguiente error

Error de Sass

no hay un mixin llamado roboto-family Rastreo: src/pages/forms/forms.scss:5

He guardado fuentes en la ruta

src/www/assets/fonts/roboto

¿Alguien puede ayudarme a cómo resolver esto? ¿Cuáles son las cosas que me están faltando?

Respuesta #1

Como veo, hay una línea que dice

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

en varios lugares.

Pero no hay un valor definido ni un mixin para la familia roboto que incluir.

Déjame usar un ejemplo.

Un mixin te permite crear grupos de declaraciones CSS que deseas reutilizar en todo tu sitio. Incluso puedes pasar valores para hacer tu mixin más flexible. Un buen uso de un mixin es para prefijos de proveedor. Aquí hay un ejemplo para 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); }

Para crear un mixin, se utiliza la directiva @mixin y se le da un nombre. Hemos llamado a nuestro mixin border-radius. También estamos usando la variable $radius dentro de los paréntesis para que podamos pasar un radio del valor que queramos. Después de crear tu mixin, puedes usarlo como una declaración de CSS comenzando con @include seguido del nombre del mixin. Cuando se genere tu CSS, se verá así:

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

Entonces, para usar @include roboto-family necesitas definir un @mixin roboto-family

Espero que esto resuelva tu problema.

ref: Para referencia y explicación detallada