个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我使用 Yeoman 的生成器创建了一个 Angular 项目，现在我正在尝试将 Font Awesome 添加到项目中。我使用 Bower 安装了它
bower install fontawesome --save
app/index.html以下代码:
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/fontawesome/css/font-awesome.css" />
<!-- endbower -->
<!-- endbuild -->
app/styles/main.scss :
$icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
$fa-font-path: "../bower_components/fontawesome/fonts/"; // <==== here
// bower:scss
@import "bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
@import "fontawesome/scss/font-awesome.scss"; // <==== and here
// endbower
grunt build ，但是有些东西(Grunt？)将我的文件编辑回原始文件。
index.html得到了
<link>再次和我的
main.scss仅与 Bootstrap 导入一起保留。
bower.json并与 Font Awesome 的
bower.json 相比我看到了以下区别:
// Bootstrap
"main": [
"assets/stylesheets/_bootstrap.scss", // it's SCSS
...
],
// Font Awesome
"main": [
"./css/font-awesome.css", // it's CSS
...
],
bower.json 覆盖 Font Awesome 的 bower 配置，并在其中添加以下代码
"overrides": {
"fontawesome": {
"main": [
"./scss/font-awesome.scss", // now it's SCSS
"./fonts/*"
]
}
}
"main"属性(property)？
最佳答案
从您的问题来看，我认为您可能是 Web 前端构建过程的新手。不幸的是，它有时会让人头疼。
首先，请注意 SCSS != CSS 和浏览器不知道如何使用 SCSS。其中<link rel="stylesheet" href="main.scss">在您的 HTML <head>标签将不起作用。我们可以在开发过程中享受 SCSS 的各种好处(例如变量、导入等)，但要在浏览器中使用这些样式，我们必须 转译 SCSS 到 CSS(浏览器识别)。
为了使开发人员的生活更轻松，种子项目(例如您正在使用的项目)通常包含某种自动构建过程，其中包括将 SCSS 转换为 CSS。构建过程通常通过任务运行程序执行，例如 Grunt 或 Gulp。这些种子项目/模板通常还包括将项目的依赖项(如您在 bower.json 文件中声明的)注入(inject)您的 index.html 的任务。自动地。一个名为 wiredep 的工具用于阅读您的bower.json文件来确定这些依赖关系，特别是，它会寻找'main'属性来确定特定包需要哪些文件。然后它将注入(inject)适当的<script/>和 <link>标签。
为了进一步解释这一点，当你执行 bower -install font-aweseome --save发生了一些事情:
bower_components/ )。 bower.json文件将包添加到项目的依赖项中。 bower.json描述其各种属性的文件，其中最重要的(在名称之后)是
main .你可以看到
font-awesome
bower.json文件
here .如您所见，它是
main属性引用了几个文件。这些是
wiredep 的文件用于确定
<script/>和
<link>标签注入(inject)你的
index.html .
bower.json像这样:
"overrides": {
"fontawesome": {
"main": [
"./scss/font-awesome.scss", // now it's SCSS
"./fonts/*"
]
}
}
wiredep那
./scss/font-awesome.scss和
./fonts/*是您的项目所需的文件，请忽略
font-awesome 中列出的文件bower.json 文件。
@import允许您将样式拆分为几个较小的 SCSS 文件(部分)，这些文件在转换时被组合并包含在单个(可选缩小)CSS 文件中。这包括
任何第三方 SCSS 导入到
main.scss 中的文件.例如，如果您导入了
font-awesome.scss进入您的
main.scss文件，然后将其转换为 CSS，生成的 CSS 文件将包含
font-awesome.scss 中包含的所有样式.
main.scss文件。 main.scss进入 CSS。 <link>标记到我的 index.html 中的转译 CSS 文件文件。 关于gruntjs - 在 Yeoman 的 Angular 项目中使用 Font Awesome SCSS 的正确方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28966069/
26
4
0
我正在尝试全新安装 Yeoman，但在我尝试使用以下命令将其删除后，Yo 命令仍然存在: sudo npm remove -g yeoman npm remove -g yeoman sudo npm
当 yeoman 以嵌入形式运行时，我无法运行子生成器。 integrating yeoman in other tools 的文档提供这个例子: var yeoman = require('yeom
使用最新的 yeoman 更新 1.0，我们是否能够更改创建目录结构的方式？例如...如果我想在根目录而不是“/app”文件夹中创建我的文件，这可能吗？另外，如果我们想将我们的 Assets 文件夹命
我喜欢 Yeoman 的功能，例如 Package Manager (Bower)、Livereload 集成、Compass 等。 因此，我想用它来处理我的公共(public)网站。但是，我不想使用
我是创建 Yeoman Generator 的新手。我使用了 generator-generator 来让我开始，我经历了创建它、测试和把它全部搞定的过程。 在创建 yo 生成器的 tuts 中，他们
为什么不推荐 Yeoman 在他们的网站上写网站时建立网站 http://yeoman.io/road.html Clearing up misconceptions […] - Not recomm
尝试执行yo angular时出现以下错误: 在脚手架中，还有其他错误消息。 我做了: npm install -g yonpm install -g generator-angularyo angu
我试过console.log('message') ，但它以黑色返回消息。 有没有办法在生成器中记录彩色消息？ 最佳答案 对于查看此问题的新用户 console.log();根据 Documentat
我正在为一个相当典型的节点应用程序构建一个自耕农生成器: / |--package.json |--.gitignore |--.travis.yml |--README.md |--app/
几个月前，我使用生成器角度来搭建一个项目，整个生态系统(karma、Node 版本、grunt 包)已经取得了相当大的进展。我在运行测试、构建东西等方面不断遇到问题。 我知道我可以使用 nvm 降级我
我不小心安装了一个我不想要的生成器。 我找不到任何方法来删除它。 我应该怎么做才能实现这个目标？ 最佳答案 生成器只是普通的 npm 模块，因此您可以使用以下命令删除它 npm uninstall -
我创建了一个 Yeoman 生成器并希望我的团队使用它。 如果我在 Github 上更新我的生成器会发生什么？他们在本地安装了旧版本的生成器。他们是否总是需要重新安装才能获得最新版本？ 团队成员不知道
我正在构建一个生成器，最后我需要在应用程序的某个目录中进行npm install，我尝试了以下操作: this.spawnCommandSync('cd', [this.destinationRoot
在使用 Yeoman 搭建脚手架时，我想用模板替换应用程序中的部分内容。一切似乎都很顺利，但我在脚手架期间遇到了此冲突错误。 这个. 模板( '条件文件/html/_signup.email.html
我是一名 javascript 初学者，通过遵循编写第一个生成器教程并阅读其他生成器代码，我已经成功地使用我的第一个生成器实现了这一目标。 我尝试了各种方法来使其正常工作，但都失败了，如果有人能指出我
我正在为 yeoman 使用角度生成器，目前默认行为是我这样做的时候 yo angular:controller testController 我创建了 2 个文件 create app\script
所以我一直在为我的项目使用 yeoman.io，并且我为我的图像设置了文件夹结构。但是当我构建它时，我的文件的文件名发生了变化。 我什至使用: $ yeoman build:text 因为我只想缩小我
如何通过自耕农生成器创建一个空目录？ 我看过 mem-fs-editor ，但据我所知，只有在创建子文件时才会创建目录。我试过在子目录中创建一个文件，然后删除该文件，但这不起作用(我假设因为 mem-
我正在构建一个生成器，其中部分包含来自使用 exec 创建的另一个项目的脚手架.根据用户输入，我需要移动或删除此脚手架的一部分。 现在我正在用节点的 fs.child_process.spawn 做这
我正在跟踪yeoman.io上列出的示例Yeoman工作流程: npm install -g generator-angular generator-karma # install generato
我是一名优秀的程序员,十分优秀！