title: CSS is off when running rails 6 project on production but not on development
body: <p>I'm working on a Rails project that runs fine on my machine. However on Heroku some of the CSS is off.</p>
  <p>Here's what I've tried.</p>
  <p>The code on my machine is exactly the same as on Heroku server.
  I've tried compating compiled CSS files from my machine to Heroku and it matches exactly.
  I've tinkered with many development.rb and production.rb settings to no avail.</p>
  <p>When I run <code>rake assets:precompile</code> on Heroku I get this interesting message:</p>
  <pre><code>autoprefixer:/app/app/assets/stylesheets/application.css:29539:3: Gradient has outdated direction syntax. New syntax is like 'closest-side at 0 0` instead of '0 0, closest-side'.
  </code></pre>
  <p>I was able to replicate the problem (SOMETIMES) by running:
  rake assets:precompile RAILS_ENV=production</p>
  <p>Then if I try to fire up the server I get an YARN integrity</p>
  <p><code>warning:  warning Integrity check: Flags don't match                                                                                               error Integrity check failed                                                                                                             error Found 1 errors. </code></p>
  <p>Your Yarn packages are out of date!
  Please run <code>yarn install --check-files</code> to update.</p>
  <p>I've tried to find out more about this error but that felt impossible, running &quot;yarn check --integrity --verbose&quot; I get this</p>
  <pre><code>error Integrity check failed
  verbose 0.656281167 Error: Found 1 errors.
      at MessageError.ExtendableBuiltin (/usr/share/yarn/lib/cli.js:721:66)
      at new MessageError (/usr/share/yarn/lib/cli.js:750:123)
      at /usr/share/yarn/lib/cli.js:61104:13
      at Generator.next (&lt;anonymous&gt;)
      at step (/usr/share/yarn/lib/cli.js:310:30)
      at /usr/share/yarn/lib/cli.js:321:13
  error Found 1 errors.
  </code></pre>
  <p>When I run &quot;yarn install --check-files&quot; I get this not very helpful message</p>
  <pre><code>yarn install v1.22.5
  [1/4] Resolving packages...
  [2/4] Fetching packages...
  info fsevents@2.1.3: The platform &quot;linux&quot; is incompatible with this module.
  info &quot;fsevents@2.1.3&quot; is an optional dependency and failed compatibility check. Excluding it from installation.
  info fsevents@1.2.13: The platform &quot;linux&quot; is incompatible with this module.
  info &quot;fsevents@1.2.13&quot; is an optional dependency and failed compatibility check. Excluding it from installation.
  [3/4] Linking dependencies...
  warning &quot; &gt; ts-loader@8.0.14&quot; has unmet peer dependency &quot;webpack@*&quot;.
  warning &quot; &gt; webpack-dev-server@3.11.0&quot; has unmet peer dependency &quot;webpack@^4.0.0 || ^5.0.0&quot;.
  warning &quot;webpack-dev-server &gt; webpack-dev-middleware@3.7.2&quot; has unmet peer dependency &quot;webpack@^4.0.0&quot;.
  [4/4] Building fresh packages...
  Done in 33.32s.
  </code></pre>
  <p>My best guess is that for some reason production environment is triggering different versions for some dependency, and that is causing some css to be wrongfully compiled (were using SASS by the way).</p>
  <p>I'm not really sure how to proceed to fix this. My best guess was precompiling as production and try to fix the css to work with how it loads on heroku, but that seems a bit off. Any ideas will be very helpful.</p>