使用--sourcemap标志运行Compass

And*_*lly 11 css sass compass-sass

Compass是否支持Sass中的--sourcemap选项?我想通过Compass运行Sass.我有

sass_options = {:sourcemap => true}
Run Code Online (Sandbox Code Playgroud)

在我的config.rb中,但是当我compass watch在项目文件夹中运行时,没有生成源图文件.另一方面,当我跑

sass --compass --sourcemap --watch scss:css
Run Code Online (Sandbox Code Playgroud)

生成源文件,但忽略config.rb.

(对于任何想知道源图是什么的人来说,它是一个文件,允许开发人员工具检查器在检查元素时指向Sass scss文件中样式的来源.)

bor*_*kur 13

@cimmanon提供的解决方案对我不起作用.对我有用的是以下(在https://github.com/Compass/compass/issues/1108中对Serge-Z的信用):

sudo gem install compass-sourcemaps --pre
Run Code Online (Sandbox Code Playgroud)

然后你就像compass watch往常一样sass_options = {:sourcemap => true}在你的config.rb中.

如果您使用的是OS X El Capitan,并且由于无根模式而无法安装(在https://github.com/Compass/compass/issues/2018中为Thomzzzzz提供信用):

sudo gem install -n /usr/local/bin compass-sourcemaps --pre
Run Code Online (Sandbox Code Playgroud)


cim*_*non 12

从Sass 3.3或更高版本开始包含源映射,该映射仅与Compass 1.0兼容.

https://github.com/chriseppstein/compass/issues/1108

将以下内容添加到config.rb只会将源映射信息直接添加到已编译的CSS中:

sass_options = { :debug_info => true }
Run Code Online (Sandbox Code Playgroud)

输出:

@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/chris\/compass\/sass\/test\.scss}line{font-family:\0000314}}
.foo {
  color: red;
}
Run Code Online (Sandbox Code Playgroud)

要获取源图文件,需要将此选项添加到config.rb:

sourcemap = true
Run Code Online (Sandbox Code Playgroud)

控制台输出:

$ compass watch
 modified config.rb
    clean css
   delete css/test.css
>>> Compass is watching for changes. Press Ctrl-C to Stop.
    write css/test.css
    write css/test.css.map
Run Code Online (Sandbox Code Playgroud)