Ember Material Design 项目常见问题解决方案-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00956/article/details/144524488

Ember Material Design 项目常见问题解决方案

ember-material-design Ember implementation of Google's Material Design 项目地址: https://gitcode.com/gh_mirrors/em/ember-material-design

项目基础介绍

Ember Material Design 是一个基于 EmberJS 的开源项目，旨在实现 Google 的 Material Design 设计规范。该项目提供了一系列可重用、经过良好测试且易于访问的 UI 组件，帮助开发者在其 EmberJS 应用中快速集成 Material Design 风格。

主要的编程语言是 JavaScript，因为 EmberJS 是一个基于 JavaScript 的前端框架。

新手使用项目时的注意事项及解决方案

1. 安装和配置问题

问题描述： 新手在安装 ember-material-design 插件时，可能会遇到依赖项安装失败或配置不正确的问题。

解决步骤：

确保 Ember CLI 已安装： 在终端中运行 ember -v 检查是否已安装 Ember CLI。如果没有安装，可以通过 npm install -g ember-cli 进行安装。
安装插件： 使用 ember install ember-material-design 命令安装插件。如果安装失败，尝试使用 npm install 或 yarn install 手动安装依赖项。
配置 SASS： 项目使用 SASS 编译样式表，确保你已经安装了 ember-cli-sass 插件。可以通过 ember install ember-cli-sass 进行安装。

2. 样式表导入问题

问题描述： 新手在导入 ember-material-design 的样式表时，可能会遇到样式未生效的问题。

解决步骤：

检查 SASS 配置： 确保在项目中正确配置了 SASS。在 ember-cli-build.js 文件中，确认 ember-cli-sass 已正确配置。
导入样式表： 在项目的 app.scss 文件中，添加 @import "ember-material-design"; 语句。确保该语句在其他样式之前。
使用 Autoprefixer： 项目不提供厂商前缀，建议使用 ember-cli-autoprefixer 插件。可以通过 ember install ember-cli-autoprefixer 进行安装。

3. 字体和主题颜色问题

问题描述： 新手在自定义字体或主题颜色时，可能会遇到字体未加载或颜色未生效的问题。

解决步骤：

加载字体： 默认使用 RobotoDraft 字体，需要在 index.html 的 <head> 部分添加以下代码：
```
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
```
如果使用其他字体，可以在 SASS 文件中覆盖 $font-family 变量。
自定义主题颜色： 在导入 ember-material-design 样式表之前，设置 $primary 等变量。例如：
```
$primary: 'red';
@import "ember-material-design";
```