Vue-loader: All comments inside sass or scss codes are removed on compile!

[p3yman]

Version

15.6.4

Reproduction link

https://github.com/peyman3d/test-rtl

Environment info

 System:
    OS: macOS 10.14.2
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
  Binaries:
    Node: 10.15.0 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.7.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 72.0.3626.119
    Firefox: 64.0.2
    Safari: 12.0.2
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.2 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.2 
    @vue/babel-preset-app:  3.4.1 
    @vue/babel-preset-jsx:  1.0.0-beta.2 
    @vue/babel-sugar-functional-vue:  1.0.0-beta.2 
    @vue/babel-sugar-inject-h:  1.0.0-beta.2 
    @vue/babel-sugar-v-model:  1.0.0-beta.2 
    @vue/babel-sugar-v-on:  1.0.0-beta.2 
    @vue/cli-overlay:  3.4.1 
    @vue/cli-plugin-babel: ^3.4.0 => 3.4.1 
    @vue/cli-service: ^3.4.0 => 3.4.1 
    @vue/cli-shared-utils:  3.4.1 
    @vue/component-compiler-utils:  2.5.2 
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/web-component-wrapper:  1.2.0 
    vue: ^2.6.6 => 2.6.6 
    vue-hot-reload-api:  2.3.2 
    vue-loader:  15.6.4 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.5.21 => 2.6.6 
    vue-template-es2015-compiler:  1.8.2 
  npmGlobalPackages:
    @vue/cli: 3.3.0

Steps to reproduce

• npm run serve
• check compiled style

What is expected?

Inside comments like padding-right: 30px /*! rtl:ignore */; should be preserved at compile

What is actually happening?

Inside comments is removed before postcss

---

I’m trying to create an RTL version of my site and I’m using postcss-rtl package for it. The problem is that all the inline css comments are removed even those that started with /! and when it comes to postcss there is no / rtl:ignore / comments to process.
.slideshow-nav-prev{ right: 0 /! rtl:ignore */; }

I checked at comments preserved at css or less mode and it's just a problem when using sass or scss.

This works just fine:

I tried to config:

• loaderOptions.sass
• cssnano
• ...
  but no luck. Comments outside brackets won't be removed.
  Is there any explenation for this?

[sodatea]

That's how sass compiler works: only multiline comments are preserved in the final output.
You can try it on https://www.sassmeister.com/
There's nothing we can do about it.

But here's a workaround:
Use interpolation syntax, passing your comment as string

#app {
 margin-right: 30px #{"/* rtl:ignore */"};
}

(source: https://stackoverflow.com/a/29523594/2302258)