How can I get SCSS line numbers to show in the CSS file when using Laravel Elixir to compile Sass (like Compass does)?

Question

I am using Laravel 5.1 with Elixir: Laravel Elixir Documentation

If you use Compass to compile Sass code, the resulting CSS file has comments above each selector that gives the line number of the code in the .scss file, as shown below:

When using the standard Elixir gulpfile.js to compile a Sass file (app.scss), a sourcemap is generated in the public/css folder, however I am unable to get the line numbers in the comments as shown in the screenshot.

Is this possible when using Gulp?

Answer 1

Finally, I did.

1- Create an elixir.json file within your project root(according to laravel elixir).

2- Insert the below config:

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

The Laravel Elixir uses node-sass plugin which has an option( sourcecomments ) for adding line number and file name to the your compiled css file.

I hope this can help you.