Warning: unknown word because of sass commenting

[srekoble]

I struggled out to figure out why I was getting this warning:

Warning: assets/sass/main.scss:306:29: Unknown word Use --force to continue.

Then after a long debugging process I realise that the problem was the comment format that we use for several cases. Check the following example:

.box {
    position: relative;

    &:before {
      content: "\e812"; // star icon
      color: red;
      font-size: 13px;
    }
 }

The sass comment next to property content: "\e812"; seemed to block the grunt task

The same problem would also happen in a comment syntax like the following.

.box { // Some box usage
    position: relative;

    &:before {
      content: "\e812";
      color: red;
      font-size: 13px;
    }
 }

Then if I just implement a sass comment in a new line like the following example the problem doesn't exist.

 // Some box usage

.box {
    position: relative;

    &:before {
      content: "\e812";
      color: red;
      font-size: 13px;
    }
 }

I believe that this a common problem that needs to be fixed, I would be happy to provide any informations that can be useful.

[Rowno]

Autoprefixer only supports plain CSS. You need to run Autoprefixer on your Sass output.

[nDmitry]

That's right, compile your SCSS and run the plugin on your output.

[srekoble]

I read this line in postcss/autoprefixer from which this project has been inspired which says Because Autoprefixer is a postprocessor for CSS, you can also use it with preprocessors such as Sass, Stylus or LESS.. But since it's only for css This issue is out of topic. Thanks for your immediate answer!

[nDmitry]

This rather means you can use pre-processors and post-processors to accomplish optimal build process.