Sass 错误：没有名为 roboto-family 的 mixin 回溯：src/pages/forms/forms.scss:5
Posted
技术标签:
【中文标题】Sass 错误：没有名为 roboto-family 的 mixin 回溯：src/pages/forms/forms.scss:5【英文标题】：Sass Error: no mixin named roboto-family Backtrace: src/pages/forms/forms.scss:5 【发布时间】：2018-08-15 03:20:04 【问题描述】：您好，我对 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 错误
没有名为 roboto-family 的 mixin 回溯：src/pages/forms/forms.scss:5
我已将字体保存在路径
src/www/assets/fonts/roboto
谁能帮我解决这个问题？ 我缺少什么？
【问题讨论】：
如错误所示，您尚未定义roboto-family mixin。您可以阅读有关 mixins（和其他 SASS 基础知识）的更多信息here
【参考方案1】：
如我所见，有一行说明
@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 命名为边界半径。我们还在括号内使用了变量 $radius，这样我们就可以传入任何我们想要的半径。创建 mixin 后，您可以将其用作 CSS 声明，以 @include 开头，后跟 mixin 的名称。生成 CSS 后，它会如下所示：
.box
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
所以，要使用 @include robots-family，您需要定义一个 @mixin robot-family
希望这能解决您的问题。
参考：For reference and detailed explanation
【讨论】：
谢谢你这么好的描述。 欢迎您..！随意提出新的查询。 :)以上是关于Sass 错误：没有名为 roboto-family 的 mixin 回溯：src/pages/forms/forms.scss:5的主要内容，如果未能解决你的问题，请参考以下文章