如何使用现有的源映射将scss编译为css?

时间:2015-02-18 20:37:39

标签: css sass gruntjs source-maps

我从另一个dev开始使用现有的项目,并且正在使用SCSS,但另一个dev用于使用CodeKit在本地(而不是在服务器上)编译CSS文件。

我有一个源地图可用,所以我的问题是..我如何使用这个源地图并使用它来设置一个任务来自动监视和编译.SCSS到.CSS文件(我猜是使用Grunt?)

以下是源地图的相关部分:

"sources": ["frontend.scss","../../../../../../Library/Ruby/Gems/1.8/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/reset/_utilities.scss","../../../../../../Volumes/Datas/Sites/smashy/hashtag/hashtag/www/app/assets/scss/_bootstrapgrid.scss","../../../../../../Volumes/Datas/Sites/smashy/hashtag/hashtag/www/app/assets/libraries/font-awesome/_path.scss","../../../../../../Volumes/Datas/Sites/smashy/hashtag/hashtag/www/app/assets/libraries/font-awesome/_core.scss","../../../../../../Volumes/Datas/Sites/smashy/hashtag/hashtag/www/app/assets/libraries/font-awesome/_larger.scss","../../../../../../Volumes/Datas/Sites/smashy/hashtag/hashtag/www/app/assets/libraries/font-awesome/_fixed-width.scss","../../../../../../Volumes/Datas/Sites/smashy/hashtag/hashtag/www/app/assets/libraries/font-awesome/_list.scss","../../../../../../Volumes/Datas/Sites/smashy/hashtag/hashtag/www/app/assets/libraries/font-awesome/_variables.scss","../../../../../../Volumes/Datas/Sites/smashy/hashtag/hashtag/www/app/assets/libraries/font-awesome/_bordered-pulled.scss","../../../../../../Volumes/Datas/Sites/smashy/hashtag/hashtag/www/app/assets/libraries/font-awesome/_spinning.scss","../../../../../../Volumes/Datas/Sites/smashy/hashtag/hashtag/www/app/assets/libraries/font-awesome/_rotated-flipped.scss","../../../../../../Volumes/Datas/Sites/smashy/hashtag/hashtag/www/app/assets/libraries/font-awesome/_mixins.scss","../../../../../../Volumes/Datas/Sites/smashy/hashtag/hashtag/www/app/assets/libraries/font-awesome/_stacked.scss","../../../../../../Volumes/Datas/Sites/smashy/hashtag/hashtag/www/app/assets/libraries/font-awesome/_icons.scss","../../../../../../Library/Ruby/Gems/1.8/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/_support.scss","../../../../../../Library/Ruby/Gems/1.8/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/css3/_border-radius.scss","../../../../../../Library/Ruby/Gems/1.8/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/utilities/general/_clearfix.scss","../../../../../../Library/Ruby/Gems/1.8/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/utilities/general/_hacks.scss","../../../../../../Library/Ruby/Gems/1.8/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/css3/_box-sizing.scss","../../../../../../Library/Ruby/Gems/1.8/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/css3/_transition.scss","../../../../../../Library/Ruby/Gems/1.8/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/css3/_opacity.scss","../../../../../../Library/Ruby/Gems/1.8/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/css3/_transform.scss"],
"names": [],
"file": "frontend.css"

1 个答案:

答案 0 :(得分:0)

正如您所提到的,您需要检查源图文件以确定原始SCSS文件。

然后你需要设置2个grunt任务(或者你可以使用Gulp):

  • 构建将您的sass文件编译为frontend.css
  • 的任务
  • 监视任务,监视您的sass文件并在更改时触发构建任务

互联网上有很多关于这个主题的教程,例如: http://ryanchristiani.com/getting-started-with-grunt-and-sass/

确保编辑watch和sass任务中的源文件以反映您的实际文件。