使用 Laravel Elixir 编译 Sass（如 Compass 一样）时，如何在 CSS 文件中显示 SCSS 行号？答案

【问题标题】：How can I get SCSS line numbers to show in the CSS file when using Laravel Elixir to compile Sass (like Compass does)?使用 Laravel Elixir 编译 Sass（如 Compass 一样）时，如何在 CSS 文件中显示 SCSS 行号？
【发布时间】：2016-01-13 16:34:07
【问题描述】：

我正在使用 Laravel 5.1 和 Elixir：Laravel Elixir Documentation

如果使用 Compass 编译 Sass 代码，生成的 CSS 文件在每个选择器上方都有 cmets，它给出了 .scss 文件中代码的行号，如下所示：

使用标准 Elixir gulpfile.js 编译 Sass 文件 (app.scss) 时，会在 public/css 文件夹中生成 sourcemap，但是我无法获取 cmets 中的行号，如屏幕截图所示.

在使用 Gulp 时可以这样做吗？

【问题讨论】：

你在找源图吗？
不，如果您看到的屏幕截图不是源映射，而只是 Compass 输出的行号 cmets。我们已经有了可以正常工作的源地图。

标签： css sass gulp gulp-sass laravel-elixir

【解决方案1】：

最后，我做到了。

1- 在你的项目根目录中创建一个 elixir.json 文件（根据 laravel elixir）。

2- 插入以下配置：

{
      "css": {
        "sass": {
          "pluginOptions": {
            "sourceComments": true
          }
        }
      }
}

Laravel Elixir 使用 node-sass plugin，它有一个选项 (sourcecomments) 用于将行号和文件名添加到编译的 css 文件中。

希望对你有帮助。

【讨论】：