app/app.css file is always loaded twice in the template #792

Closed
emartinpi opened this Issue Jan 23, 2015 · 6 comments

Comments

Projects
None yet
3 participants
@emartinpi

This is part of the template is built when the app is running

<!-- build:css({.tmp,client}) app/app.css -->
  <link rel="stylesheet" href="app/app.css">
      <!-- injector:css -->
      <link rel="stylesheet" href="app/app.css">
      <link rel="stylesheet" href="app/main/main.css">
      <!-- endinjector -->
<!-- endbuild -->

<%= yeoman.client %>/{app,components}/**/*.css
Maybe this line above should be added to injector task in Gruntfile.js, to avoid app/app.css is loaded twice.

@nottinhill

This comment has been minimized.

Show comment
Hide comment
@nottinhill

nottinhill Feb 11, 2015

That line is already there. Anyway, I do not understand how adding an additional injector task would get rid of the additional injector task? Wouldn't you end up with three app.css injections then?

That line is already there. Anyway, I do not understand how adding an additional injector task would get rid of the additional injector task? Wouldn't you end up with three app.css injections then?

@emartinpi

This comment has been minimized.

Show comment
Hide comment
@emartinpi

emartinpi Feb 11, 2015

You're right nottinhill. I was wrong when I copy/paste the code line, hahaha. so sorry.
The right code to be added would be:

!<%= yeoman.client %>/app/app.css

Thanks for your comment!

You're right nottinhill. I was wrong when I copy/paste the code line, hahaha. so sorry.
The right code to be added would be:

!<%= yeoman.client %>/app/app.css

Thanks for your comment!

@nottinhill

This comment has been minimized.

Show comment
Hide comment
@nottinhill

nottinhill Feb 17, 2015

Can you please point out where exactly you want to add that code? And what code should be commented out? The exclamation mark in your snippet, what is it achieving?

This is as this generator is coming pre-configured out of the box when checking out:

injectCss: {
    files: [
      '<%= yeoman.client %>/{app,components}/**/*.css'
    ],
    tasks: ['injector:css']
},

In addition I am seeing a different kind of problem now:

This is my index.html:

<link rel="stylesheet" href="app/47527100.vendor.css"/>
  <!-- injector:css -->
  <link rel="stylesheet" href="app/app.css">
  <!-- endinjector -->
 <!-- endbuild -->

But there is no app/app.css being created; let alone a minified version. Something seems to be terribly broken here. I am ending up copying the app.css by hand to the correct folder in dist. How to correct this bug?

Can you please point out where exactly you want to add that code? And what code should be commented out? The exclamation mark in your snippet, what is it achieving?

This is as this generator is coming pre-configured out of the box when checking out:

injectCss: {
    files: [
      '<%= yeoman.client %>/{app,components}/**/*.css'
    ],
    tasks: ['injector:css']
},

In addition I am seeing a different kind of problem now:

This is my index.html:

<link rel="stylesheet" href="app/47527100.vendor.css"/>
  <!-- injector:css -->
  <link rel="stylesheet" href="app/app.css">
  <!-- endinjector -->
 <!-- endbuild -->

But there is no app/app.css being created; let alone a minified version. Something seems to be terribly broken here. I am ending up copying the app.css by hand to the correct folder in dist. How to correct this bug?

@emartinpi

This comment has been minimized.

Show comment
Hide comment
@emartinpi

emartinpi Feb 24, 2015

The code you mention above in the snippet I think is for livereloading. The code I mean is below, near the end of file.

The css injector code should be something like that:

      // Inject component css into index.html
      css: {
        options: {
          transform: function(filePath) {
            filePath = filePath.replace('/client/', '');
            filePath = filePath.replace('/.tmp/', '');
            return '<link rel="stylesheet" href="' + filePath + '">';
          },
          starttag: '<!-- injector:css -->',
          endtag: '<!-- endinjector -->'
        },
        files: {
          '<%= yeoman.client %>/index.html': [
            '<%= yeoman.client %>/{app,components}/**/*.css',
            '!<%= yeoman.client %>/app/app.css'  //this is the line to be added to prevent app.css from being loaded twice  --
          ]
        }
      }

The exclamation mark is the negation. You're telling grunt to load all app/**/*.css files but not the app/app.css file. (same way as app/app.js) Check the script injector just before css injector in gruntfile.js :)

 // Inject application script files into index.html (doesn't include bower)
      scripts: {
        ...
        files: {
          '<%= yeoman.client %>/index.html': [
              ['{.tmp,<%= yeoman.client %>}/{app,components}/**/*.js',
               '!{.tmp,<%= yeoman.client %>}/app/app.js', //line to prevent app.js from being loaded twice
               '!{.tmp,<%= yeoman.client %>}/{app,components}/**/*.spec.js',
               '!{.tmp,<%= yeoman.client %>}/{app,components}/**/*.mock.js']
            ]
        }
      }

The code you mention above in the snippet I think is for livereloading. The code I mean is below, near the end of file.

The css injector code should be something like that:

      // Inject component css into index.html
      css: {
        options: {
          transform: function(filePath) {
            filePath = filePath.replace('/client/', '');
            filePath = filePath.replace('/.tmp/', '');
            return '<link rel="stylesheet" href="' + filePath + '">';
          },
          starttag: '<!-- injector:css -->',
          endtag: '<!-- endinjector -->'
        },
        files: {
          '<%= yeoman.client %>/index.html': [
            '<%= yeoman.client %>/{app,components}/**/*.css',
            '!<%= yeoman.client %>/app/app.css'  //this is the line to be added to prevent app.css from being loaded twice  --
          ]
        }
      }

The exclamation mark is the negation. You're telling grunt to load all app/**/*.css files but not the app/app.css file. (same way as app/app.js) Check the script injector just before css injector in gruntfile.js :)

 // Inject application script files into index.html (doesn't include bower)
      scripts: {
        ...
        files: {
          '<%= yeoman.client %>/index.html': [
              ['{.tmp,<%= yeoman.client %>}/{app,components}/**/*.js',
               '!{.tmp,<%= yeoman.client %>}/app/app.js', //line to prevent app.js from being loaded twice
               '!{.tmp,<%= yeoman.client %>}/{app,components}/**/*.spec.js',
               '!{.tmp,<%= yeoman.client %>}/{app,components}/**/*.mock.js']
            ]
        }
      }
@nottinhill

This comment has been minimized.

Show comment
Hide comment
@nottinhill

nottinhill Mar 3, 2015

Thanks for added explanation!

Thanks for added explanation!

@Awk34

This comment has been minimized.

Show comment
Hide comment
@Awk34

Awk34 Oct 10, 2015

Member

Closing due to inactivity.

Member

Awk34 commented Oct 10, 2015

Closing due to inactivity.

@Awk34 Awk34 closed this Oct 10, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment