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

Question

我从其他开发人员那里接手了一个现有项目，并且正在使用 SCSS，但其他开发人员过去使用 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"

Answer 1

如您所述，您需要检查源映射文件以确定原始 SCSS 文件。

然后你需要设置2个grunt任务（或者你可以使用Gulp）：

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

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

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

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

How to use an existing source map to compile scss to css?

css

sass

gruntjs

source-maps