Giters

vyakymenko / angular-seed-express

[DEPRECATED, Please use https://github.com/vyakymenko/angular-express] Extensible, reliable and modular starter project for Angular 7 with statically typed build AoT compilation, Express server and PM2 Daemon.

Home Page:https://github.com/vyakymenko/angular-seed-express

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Dev vs Prod styling discrepancies

redevill opened this issue · comments

commented

This is for the latest release tag 6.0.1
[x ] bug report => search github for a similar issue or PR before submitting

Current behavior
npm run build.dev creates a non minified set of files, and runs perfectly in browser.
npm run build.prod currently appears to create a CSS with missing pieces
The symptom, is that the webpages are not styled correctly and FontAwsome icons missing.

Expected behavior
That the web page appears with the same styling in both dev and prod modes.

Minimal reproduction of the problem with instructions
As above, a project with bootstrap and fontawesome...

What is the motivation / use case for changing the behavior?
Huge motivation, going to have to roll back my project.

Please tell us about your environment:
Seed-express 6.0.1
Mac 10.13.6 (17G65)
Webstorm latest
Npm 6+
Node 9.10.1

Any pointers here would be really appreciated!!
Thanks

commented

Thanks for this issue,

Will verify it at the new version of angular-seed-express and 6.0.1.

commented

Checked to see if upgrading to 7.0.1 would help me. No luck there, as it turns out I have libraries with AOT issues.

Started digging in to the packaged css "main.css". My understanding (don't know for sure) is that the css is all bundled into it. Targeted one class I knew was not working. "pull-right". Found this definition in the css, and there is only one of them, but it was not being applied.

I found that if I moved it up, before the .navbar-light .navbar-toggler-icon { background-image: url("data:image/.... 5000 more lines here }
THEN it WOULD be applied.

Something to do with that funky piece of css that's breaking it.

commented

@vyakymenko - The output file is not being minified (6.0.1) Even when I pull a blank seed project, and run "npm run build.prod.

Found an improvement, that the styling works a bit better if Boot strap is at the end. But this is still not a solution.

// Add NPM third-party libraries to be injected/bundled.
// Source paths relative to node_modules folder.
this.NPM_DEPENDENCIES = [
...this.NPM_DEPENDENCIES,
{src: 'roboto-fontface/css/roboto/roboto-fontface.css', inject: true},
{src: 'font-awesome/css/font-awesome.css', inject: true},
{src: 'bootstrap/dist/css/bootstrap.min.css', inject: true}
];

commented

It's leaving out a closing curly Brace on the Bootstrap injection !!!

commented

Thanks @redevill , I'll verify at the weekend!

commented

@vyakymenko Thanks!

Narrowed it down a bit, something to do with the postcss step below:

If you change the css build task -> tools/tasks/seed/build.html_css.ts
Comment out the postcss processing, Then the CSS works
/**

  • Processes the external CSS files using postcss with the configured processors.
    */
    function processExternalCss() {
    return getExternalCssStream()
    //.pipe(plugins.postcss(processors))
    .pipe(isProd ? plugins.concatCss(gulpConcatCssConfig.targetFile, gulpConcatCssConfig.options) : plugins.util.noop())
    .on('error', reportPostCssError)
    .pipe(gulp.dest(Config.CSS_DEST));
    }
commented

Hi @redevill ,

The problem is that postcss can't process files that are already contain prefixes that is making compilation incorrect.

There are 2 solutions:

  1. You can use scss so that issue will not occur.
  2. Or you can comment postcss function as you mentioned if you still want to use css.

Thanks!