Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Problem with overrides #122

Closed
rodrigoreis22 opened this issue Mar 2, 2015 · 10 comments
Closed

Problem with overrides #122

rodrigoreis22 opened this issue Mar 2, 2015 · 10 comments

Comments

@rodrigoreis22
Copy link

I have this bower.json:

{
  "name": "stnfy-fe",
  "version": "0.0.0",
  "dependencies": {
    "angular-material": "~0.8.2"
  },
  "overrides": {
    "angular-material": {
      "main": [ "angular-material.js", "modules/closure/tabs/tabs.css", "modules/closure/radioButton/radioButton.css","modules/css/angular-material-layout.css" ]
    }
  }
}

The files angular-material.js and modules/css/angular-material-layout.css go to the index.html. But the other files (modules/closure/tabs/tabs.css, modules/closure/radioButton/radioButton.css) don't.

This is my Gruntfile.js:

'wiredep': {
      app: {
        src: '<%= yeoman.app %>/index.html',
        ignorePath: '<%= yeoman.app %>/',
        exclude: ['bower_components/bootstrap/dist/js/bootstrap.js']
      }
    },
@stephenplusplus
Copy link
Owner

Do you have <!-- bower:css --><!-- endbower --> placeholders in the <head> of the HTML file?

@rodrigoreis22
Copy link
Author

Yes, I do @stephenplusplus

@stephenplusplus
Copy link
Owner

Can you put together a sample gist? I tried it with straight wiredep, and all went well:

<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-material/modules/closure/tabs/tabs.css" />
<link rel="stylesheet" href="bower_components/angular-material/modules/closure/radioButton/radioButton.css" />
<link rel="stylesheet" href="bower_components/angular-material/modules/css/angular-material-layout.css" />
<!-- endbower -->

<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<!-- endbower -->

Maybe un- and re-install grunt-wiredep to get the latest wiredep.

@pixelbacon
Copy link

Just installed yeoman-angular... Same issue. Wiredep is not respecting the Overrides property.

Uninstalled, then reinstalled. No dice. It's definitely running, as I've deleted what's in the docs in my html file and ran it again. Just not seeing overrides.

// bower.json
{
  "name": "email-signature",
  "version": "0.0.0",
  "dependencies": {
    "angular": "^1.3.0",
    "bootstrap": "^3.2.0",
    "angular-animate": "^1.3.0",
    "angular-cookies": "^1.3.0",
    "angular-resource": "^1.3.0",
    "angular-route": "^1.3.0",
    "angular-sanitize": "^1.3.0",
    "angular-touch": "^1.3.0",
    "fontawesome": "~4.3.0",
    "angular-ui-bootstrap": "~0.12.1",
    "angular-material": "~0.8.3"
  },
  "devDependencies": {
    "angular-mocks": "^1.3.0"
  },
  "overrides": {
    "bootstrap": {
      "ignore": [
        "*.js",
        "*.css"
      ]
    },
    "bootswatch": {
      "main": [
        "./flatly/bootstrap.min.css"
      ]
    }
  },
  "appPath": "app",
  "moduleName": "emailSignatureApp"
}

@CWSpear
Copy link

CWSpear commented Apr 17, 2015

What specifically isn't working? It's been a while since I have been in the code, but I don't overrides handles overriding ignore.

As for the bootswatch override, I don't know that it'd matter, but it would normally just be flatly/bootstrap.min.css.

More importantly, though, I don't see bootswatch in your dependencies. Run

bower install --save bootswatch

and try again. wiredep requires that it be in your bower.json. It's not good enough just to be installed.

@pixelbacon
Copy link

Correct, thanks for catching that.

It's more so the ignore isn't catching, while it is catching on other projects. I.e. gulp-wiredep adheres to it.

The point of using ignore, instead of main is so that you don't have to restate everything you want to include, just state what you don't want. I.E. I want the glyphicons from bootstrap, but don't want the css or JS if I'm using Bootswatch and/or Angular-ui-bootstrap.

Anyhow main is being seen in the overrides, ignore does not seem to be.

@stephenplusplus
Copy link
Owner

There is no gulp-wiredep :), but I assume you mean require('wiredep').stream. We don't do any logic with ignore from bower.json. We only need main and dependencies. All other information must be explicitly told to wiredep configuration at the task level.

@pixelbacon
Copy link

Ah, derp, forgot. I meant the bower related gulp packages.

Thank you for the clarification about only needing main and dependencies!

@stephenplusplus
Copy link
Owner

The point of using ignore, instead of main is so that you don't have to restate everything you want to include, just state what you don't want.

You can use the exclude option from wiredep for this.

It's best to override a library's bower.json only to correct its mistakes (maybe the package author "hates bower" and doesn't care about the config [I've seen this] or they don't maintain the project anymore, etc). When you need a package to behave differently than it was intended, that configuration should be provided on the task level. Things can get tangled and messy quickly otherwise. 👍

@stephenplusplus
Copy link
Owner

@pixelbacon I think we've got this one cleared up, but please re-open if I'm wrong. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@CWSpear @stephenplusplus @pixelbacon @rodrigoreis22