Production minify css is different form development

Ember CLI
1

development layout

53%20PM
53%20PM1812×1058 47.1 KB
production layout
07%20PM
07%20PM1836×664 25.4 KB
Hi I been develop web app with ember for a while , but recently i hit a weird issue the css is different between production and development. In css i only import bootstrap and ember-power-select , it look okay in dev but after build in production, the layout look not the same, my solution now is manually minify css and replace it , but i wondering is there other way to fix this?

2

Chances it’s an import gone astray. I’ve run into a couple of ways this can happen. Checking your browser’s network tab to see where it is looking for stuff may give insight.

If your production root url isn’t /, (and your localhost:4200/, of course, is), absolute URLs can get you into trouble. Relative URLs with too many . .\ can also walk right past your root URL, where the “/“ wall protected you in “ember s”

If you are using .scss or .less and are importing other css, relative URLs that go outside the scope of compilation have to be relative to your assets directory, where your compiled .css will live.

I don’t know if either of these will help, but they’re both just special cases of thinking about (and perhaps reading) your minimized css where it actually lands and making sure the way you’ve expressed things will still be valid in that environment.

3

I had this issue. The CSS minifer seems to get a bit carried away, I fixed by adding this option to ember-cli-build.js:

let app = new EmberApp(defaults, {
  ...

  minifyCSS: {
    options: {
      advanced: false,
    },
  },

  ...
});