0

I have a simple landing page and I used webpack. If I run webpack with -p flag which stands for -optimize-minimize it will break css gradients in Firefox. Instead of smooth color change I see harsh stripes.

Under the hood css-loader using cssnano module.

Any idea what causing this issue?

Thanks,

{
      test: /.scss$/i,
      loaders: ['style', 'css?sourceMap&safe', 'postcss-loader', 'sass?sourceMap'],
}
piouPiouM
  • 4,937
  • 1
  • 21
  • 22
Vlad Miller
  • 2,255
  • 1
  • 20
  • 38
  • No idea but have you tried using `autoprefixer-loader` before `sass-loader`? – ArchNoob May 21 '16 at 08:33
  • @ArchNoob yes, I use autoprefixer via postcss-loader. It's just weird that minified version of bundle breaks css – Vlad Miller May 21 '16 at 09:38
  • aha okay. Also i checked the output of my `css-gradients` there was only `webkit-linear-gradient` so i guess it doesn't apply. Maybe you could share your code somewhere so we can play around with it. – ArchNoob May 21 '16 at 09:57
  • @ArchNoob yes absolutely, the code is available here https://github.com/vladmiller/coin-garden-landing-page not my best, was in hurry :D I also noticed that all other prefixes are missing, it feels like somehow cssnano removes css rules with the same name – Vlad Miller May 21 '16 at 12:20
  • I'm taking a look at it. I've seen the errors in firefox already and i see `container .section.section-welcome` is the one with gradient issues. I'm only giving you this comment to let you know i'm looking at it :) . – ArchNoob May 21 '16 at 13:24
  • @ArchNoob actually there are two containers with gradient issues, body and section-welcome :) I'm also still trying my luck to find issue – Vlad Miller May 21 '16 at 16:58

0 Answers0