Rod*_*ing 5 gruntjs font-awesome bower
我使用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 -->
但我不想将它用作CSS,而是用作SCSS导入(能够更改字体文件的URL).所以我从HTML页面删除了上面的代码,并将正确的代码添加到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
...
],
然后我找到了一种方法来正确(不确定)使用我的应用程序覆盖Font Awesome的凉亭配置bower.json,并将以下代码添加到其中
"overrides": {
"fontawesome": {
"main": [
"./scss/font-awesome.scss", // now it's SCSS
"./fonts/*"
]
}
}
问题:这是使用Font Awesome作为SCSS导入的正确方法,并避免在构建项目时更改文件的Grunt吗？通过覆盖其默认"main"属性？
从你的问题来看，我认为你可能是网络前端构建过程的新手。不幸的是，有时这会让人头疼。
首先，请注意 SCSS != CSS 并且浏览器不知道如何使用 SCSS。包含<link rel="stylesheet" href="main.scss">在您的 HTML<head>标记中将不起作用。我们可以在开发过程中享受SCSS的各种好处（例如变量、导入等），但是要在浏览器中使用这些样式，我们必须将SCSS转换为CSS（浏览器可以识别）。
为了让开发人员的生活更轻松，种子项目（例如您正在使用的项目）通常包含某种自动构建过程，其中包括将 SCSS 转译为 CSS。构建过程通常通过任务运行器执行，例如 Grunt 或 Gulp。这些种子项目/模板通常还包含一项任务，用于将项目的依赖项（如 Bower.json 文件中声明的那样）index.html自动注入到您的项目中。一个名为 的工具wiredep用于读取bower.json文件以确定这些依赖关系，特别是，它将查找“main”属性来确定特定包需要哪些文件。然后它将注入适当的<script/>和<link>标签。
为了进一步解释这一点，当您执行时bower -install font-aweseome --save会发生一些事情：
bower_components/）。bower.json将包添加到项目的依赖项中。每个包都包含自己的bower.json文件，描述其各种属性，其中最重要的（在名称之后）是main. 您可以在此处font-awesome bower.json查看该文件。正如您所看到的，它的属性引用了多个文件。这些文件用于确定将哪些文件和标签注入到您的.mainwiredep<script/><link>index.html
通过在项目 中指定覆盖，bower.json如下所示：
"overrides": {
"fontawesome": {
"main": [
"./scss/font-awesome.scss", // now it's SCSS
"./fonts/*"
]
}
}
您指定的wiredep是./scss/font-awesome.scss项目./fonts/*所需的文件，并忽略font-awesomeBower.json 文件中列出的文件。
关于 SCSS：请查看 Sass指南，特别是有关导入的部分。Sass@import允许您将样式拆分为多个较小的 SCSS 文件（部分），这些文件在转译后将合并并包含在单个（可选的缩小的）CSS 文件中。这包括您导入到main.scss. 例如，如果您导入font-awesome.scss到main.scss文件中，然后将其转换为 CSS，则生成的 CSS 文件将包含font-awesome.scss.
要包含和自定义第三方 SCSS 文件，我要做的是：
main.scss。main.scss为 CSS。<link>转译 CSS 文件的标签index.html。| 归档时间： |
|
| 查看次数： |
2774 次 |
| 最近记录： |