Choosing bootstrap generates vendor.scss in app, but using angular-material doesn't.

[ghost]

I'm using material-design-iconic-font

Chose all angular options, for framework choose Angular-Material. choosing bootstrap generates vendor.scss in app, but using angular-material doesn't.

Using .010

suggested fix:

          <link rel="stylesheet" href="app/vendor.css">
          <!-- bower:css -->
          <!-- run `gulp inject` to automatically populate bower styles dependencies -->
          <!-- endbower -->
          <!-- endbuild -->
        ---

        in gulp/inject.js
            var wiredepOptions = {
              directory: 'bower_components',
              exclude: [/material-design-iconic-font/, /material-design-iconic-font\.css/]
            };

        In gulp/build.js
         .pipe(cssFilter) // <-- find this
              .pipe($.replace('../../bower_components/material-design-iconic-font/fonts', '../fonts/'))

        in gulp/unit-tests.js
            var bowerDeps = wiredep({
              directory: 'bower_components', // < find
              exclude: [/material-design-iconic-font/, /material-design-iconic-font\.css/],

[webcaetano]

Same problem here. Apparently not every package follow the same bower.json default for main.

[webcaetano]

The error are in WireDep https://github.com/taptapship/wiredep#what-can-go-wrong

Fixed by doing this. https://github.com/taptapship/wiredep#bower-overrides

[ghost]

No, not quite. I updated my issue

[ghost]

In my case I needed to add

    <!-- build:css({.tmp/serve,src}) styles/vendor.css -->
      <link rel="stylesheet" href="app/vendor.css">
      <!-- bower:css -->
      <!-- run `gulp inject` to automatically populate bower styles dependencies -->
      <!-- endbower -->
      <!-- endbuild -->
    ---

    in gulp/inject.js
        var wiredepOptions = {
          directory: 'bower_components',
          exclude: [/material-design-iconic-font/, /material-design-iconic-font\.css/]
        };

    In gulp/build.js
     .pipe(cssFilter) // <-- find this
          .pipe($.replace('../../bower_components/material-design-iconic-font/fonts', '../fonts/'))

    in gulp/unit-tests.js
        var bowerDeps = wiredep({
          directory: 'bower_components', // < find
          exclude: [/material-design-iconic-font/, /material-design-iconic-font\.css/],

[zckrs]

@robertbaker How you install material-design-iconic-font? Can you paste your .yo-rc.json ?

[ghost]

I have it in another issue I created. Through bower, in my bower json.

The solution is to reference scss in vendor.scss so this bug is really the generator not making a vendor.css if angular-material is chosen, even though SASS is.

[zckrs]

ok. Thanks

[zckrs]

angular-material doesn't provides SCSS. I'm sorry but I dont understand your issue.

[ghost]

The issue is the generator does not create the vendor.scss file (and related gulp config) if angular-material is chosen, but SASS is.

Vendor scss and config should be generated if SASS is selected. Right now it's dependent on bootstrap sass being selected. IMO vendor.scss should be generated if the SASS option is selected. Right now it's only being generated if sass AND bootstrap-sass are selected.

[zckrs]

Why you want a vendor.scss if library don't provide source in SASS ?

https://github.com/angular/bower-material

[ghost]

That's the only way to import any SASS from bower_components.

Just because I'm not using bootstrap, doesn't mean I'm not going to use any other bower packages that do use SASS.

Currently SASS files are ignored during injection, even if they are specified in the bower.json. The only way I found to use SASS from bower_components is to import the file in vendor.scss. Which does not exist (and the gulp config that goes with it) unless you specify bootstrap-sass.

You should get the capability to use the vendor.scss file if you choose a SASS option. If you don't need to import any sass from bower_components, the file just goes unused

Why wouldn't you want vendor.scss, bootstrap isn't the only bower package that uses SASS. It seems counter intuitive to only include vendor.scss if you choose bootstrap, when it doesn't need bootstrap at all. It's a feature tied to SASS and thus should be given if you choose a SASS option, not just the bootstrap SASS option.

[Swiip]

Ok I got it.

As angular-material doesn't link the sass version in its bower.json, we consider that there is no need of using a vendor.scss. It's the case at the moment of the initialization but I agree that you could have use for it anyway later.

In fact, we shouldn't assume anything and create all the files even when the main framework chosen can't use all the features.

About the lib "material-design-iconic-font" in particular, you'll still have to make your awn adjustments as there is several material icons lib and I'm not sure we want to include this one by default.

[ghost]

@Swiip See issue: https://github.com/taptapship/wiredep/issues/175#issuecomment-89404985

I'll try to find some time to give a repro case.

Also, I don't believe the inject task is configured to look for SCSS files: >https://github.com/Swiip/generator-gulp-angular/blob/v0.10.0/app/templates/gulp/_inject.js#L59.

If you can confirm this still won't work after pointing wiredep to your SCSS file which has placeholders like shown above, a test case will definitely be appreciated :)

What is the use case for vendor.scss file, if wiredep can inject scss?

[Swiip]

The new mechanism is that wiredep inject scss deps in vendor.scss...