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

SASS源地图指向错误的SASS文件

如何解决《SASS源地图指向错误的SASS文件》经验,有好办法吗?

我有4个SASS文件main.sass,_fonts.sass,_variables.sass,_home.sass.

main.sass

@import 'fonts'
@import 'variables'
@import 'home'

_fonts.sass

@font-face
    font-family: "FontAwesome"
    font-weight: normal
    font-style: normal
    src: url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0")
    src: url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"), url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"), url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"), url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"), url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg")

_variables.sass

$yellow: #fce001

_home.sass

.container
    color: $yellow
    text-align: right

.another-container
    color: $yellow
    text-align: center

    &:after
        content: '\f0b0'
        font-family: FontAwesome
        font-style: normal
        font-weight: normal
        text-decoration: inherit
        position: absolute
        right: 20px
        display: inline-block
        font-size: 1.1em

这是我的示例HTML



    
    
    
    
    


    
container
another-container

我正在使用此命令编译我的SASS文件: sass --watch main.sass:style.css

当我检查我的谷歌浏览器检查元素containeranother-container,它指向_variables.sassNOT _home.sass._variables.sass只包含变量.我希望它指向_home.sass.

@update我设法找出导致错误的原因,在_home.sasscontent: '\f0b0',如果我删除它,源地图指向正确的行,为什么这会导致错误?


推荐阅读
  • 本文介绍了响应式页面的概念和实现方式,包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点,提出了选择方案的建议。同时,对于响应式页面的需求和背景进行了讨论,解释了为什么需要响应式页面。 ... [详细]
  • document .ready中的函数怎么被按钮调用? ... [详细]
  • AngularJS 提交表单的方式(一)
    英文原文:SubmittingAJAXForms:TheAngularJSWay在AngularJS出现之前,很多开发者就面对了表单提交这一问题。由于提 ... [详细]
  • 前端提高篇(七十):SVG基本使用、基本样式、路径path
    SVG是使用XML来描述二维图形和绘图程序的语言。SVG遵循的是xml的规范,与html5的使用有所区别SVG绘制出来的是矢量图,放大之后不会失真官方文 ... [详细]
  • webui之常用js操作(webui界面是什么)
    本文目录一览:1、web前端开发需要掌握的几个必备技术 ... [详细]
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • Nginx使用(server参数配置)
    本文介绍了Nginx的使用,重点讲解了server参数配置,包括端口号、主机名、根目录等内容。同时,还介绍了Nginx的反向代理功能。 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • HTML5网页模板怎么加百度统计?
    本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • 1.移除consol.log()的babel插件安装:npmibabel-plugin-transform-remove-console-D配置:babel.config.js:这 ... [详细]
  • 电信网为不能访问联通服务器的网站_老板说网站慢,我们总结了三大阶段提升性能...
    作者:李平来源:https:www.cnblogs.comleefreemanp3998757.html前言在前一篇随笔《大型网站系统架构的演化》中&# ... [详细]
  • 前端库Bootstrap框架:「11]使用 span 创建行内元素
    前端库Bootstrap框架:「11]使用 span 创建行内元素 ... [详细]
  • 本文实例为大家分享了d3.js图形拖拽的具体代码,供大家参考,具体内容如下 ... [详细]
  • Pygal,可导出矢量图的Python可视化利器
    Python有很多优秀的可视化库,其中有名的像matplotlib、seaborn、plotly,可以绘制出各式绚丽的图表。这次介绍一个不那么广为人知 ... [详细]
author-avatar
avici
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有