热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

当包含web字体时,SASS语法错误-SASSSyntaxErrorwhenincludingwebfont

WhenItrytouserakeassets:precompileRAILS_ENVproductionitthrowsthiserror:当我尝试使用rake资产:pre

When I try to use rake assets:precompile RAILS_ENV=production it throws this error:

当我尝试使用rake资产:precompile RAILS_ENV=生产时,它会抛出这个错误:

Sass::SyntaxError: Invalid CSS after "...awesome-webfont": expected ")", was ".woff);"

This is my style.css file:

这是我的风格。css文件:

@font-face {
    font-family:FontAwesome;
    src:font-image-url(fontawesome-webfont.woff);
}

If I comment the line src:font-image-url(fontawesome-webfont.woff); this error appears

如果我注释行src:font-image-url(fontawesome-webfont.woff);这个错误出现

Sass::SyntaxError: Invalid CSS after "...:image-url(ban2": expected ")", was ".jpg);"

I am using gem "font-awesome-rails" with rails 4.2.4 .

我正在使用gem“font-awesome-rails”和rails 4.2.4。

1 个解决方案

#1


3  

Firstly, you'll need to wrap your URL in quotation marks.

首先,您需要用引号将URL包装起来。

Secondly, SASS does not have a URL helper font-image-url. You're maybe looking for font-url, which does the following:

其次,SASS没有URL帮助器font-image-url。你可能在寻找font-url,它的功能如下:

Generates a path to an asset found relative to the project's font directory.

生成相对于项目的字体目录找到的资产的路径。

Applying the above, you should have something like:

应用上述方法,您应该具有以下内容:

@font-face {
    font-family: "FontAwesome";
    src: font-url("fontawesome-webfont.woff");
}

The second error seems to come from not wrapping a URL value in quotation marks a well.

第二个错误似乎来自于没有在引号中包装URL值。


推荐阅读
  • 本文主要分享【】,技术文章【SassScss、Less是什么?】为【CRMEB】投稿,如果你遇到CRMEB,学习笔记相关问题,本文相关知识或能到你。Sass(SyntacticallyAw ... [详细]
  • 在寻找轻量级Ruby Web框架的过程中,您可能会遇到Sinatra和Ramaze。两者都以简洁、轻便著称,但它们之间存在一些关键区别。本文将探讨这些差异,并提供详细的分析,帮助您做出最佳选择。 ... [详细]
  • Sass 是一种 CSS 的预处理器,通过使用变量、嵌套、继承等高级功能,使得 CSS 的编写更加灵活和高效。本文将介绍 Sass 的基本语法及其安装使用方法。 ... [详细]
  • 原因:增加配置:webpack.base.conf.jsloaders:{scss:[vue-style-loader,css,sass].join(! ... [详细]
  • ruby环境中自动编译sass教程
    ruby环境中自动编译sass教程-sass为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护!sass安装安装完ruby之后,在开始菜单中,找到 ... [详细]
  • 1.什么是预处理器?  CSS预处理器是用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。CSS预处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容性问题。 ... [详细]
  • 《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript 6和Sass应用
    8.3.1安装和配置运行Gulp需要Node.js环境,请参看第二章内容搭建Node.js环境。使用NPM全局安装Gulp,命令如下:npminstallgulp-cli–g ... [详细]
  • vue使用Sass时出现报错问题如何解决
    本篇文章为大家展示了vue使用Sass时出现报错问题如何解决,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获 ... [详细]
  • 前言:本节主要学习下Sass、Less、Stylus在使用方面的异同。1.环境安装配置区别。  <1>Sass环境配置?    Sass的底层是Ruby语言开发的,安装Sass ... [详细]
  • SASS简单的说,他是css的升级版,他可以自定义变量,可以有if语句,还可以嵌套等等,很神奇吧!那下面我们就来介绍这个神奇的SASS!一.了解saaa1.什么是sassSASS ... [详细]
  • 本文探讨了缓存系统中的两个关键问题——缓存穿透与缓存失效时的雪崩效应,以及这些问题的解决方案。此外,文章还介绍了数据处理、数据库拆分策略、缓存优化、拆分策略、应用架构演进及通信协议的选择等内容。 ... [详细]
  • 在我的gulpfile中,我注意到了这种奇怪的行为。如果我这样定义手表(带括号): ... [详细]
  • CSSandSass(SCSS)stylerulesIDandclassnamingID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称。代替表象和 ... [详细]
  • CSS制作框架Sass 3.4.4有哪些优点
    这篇文章主要讲解了“CSS制作框架Sass3.4.4有哪些优点”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究 ... [详细]
  • 讓我們斟酌下場景:當運用remvw開闢挪動端的時刻,你定義了一個px轉rem的函數,或許是網站配色的全局變量等,然後到工程里為每一個vue文件或許組件@import‘publicf ... [详细]
author-avatar
心動寶貝r
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有