Vendor CSS in manifest.json not being included in main.css

sage
1

Hi all,

Hoping I can get a little help with this!

I’m trying to add a third-party CSS file to main.css using the vendor option in manifest.json (from Fontello, specifically: afpf_fontawesome.css).

Here’s my mainifest.json file:

{
  "dependencies": {
    "main.js": {
      "files": [
        "scripts/main.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss"
      ],
      "vendor": [
        "assets/vendor/fontello-bb972d67/css/afpf_fontawesome.css"
      ],
      "main": true
    },
    "customizer.js": {
      "files": [
        "scripts/customizer.js"
      ]
    },
    "jquery.js": {
      "bower": ["jquery"]
    },
    "fonts": {
      "files": [
        "fonts/**/*",
        "vendor/fontello-bb972d67/font/*"
      ]
    }
  },
  "config": {
    "devUrl": "..."
  }
}

Unfortunately, no matter what I try, the CSS from afpf_fontawesome.css isn’t showing up in the compiled main.css file.

Among other things, I’ve tried with and without prefixing the path with “assets/” and I’ve tried killing gulp watch and running gulp manually, with no luck.

Any help here would be much appreciated! I’m happy to provide any additional info that might help identify the problem.

Thanks in advance,

– Matt

2

Are you sure that file exists and its styles aren’t being overridden somewhere?

In your a̶s̶s̶e̶t̶ theme dir please run:

$ node
$ require('asset-builder')('./assets/manifest.json').globs.css

Paste the output here (and while you’re at it you should make sure the globs there all exist) :thumbsup:

3

Thanks for the response, @cfx!

Running it from the assets dir threw an error, but running it one level up in the theme folder produced this:

$ node
> require('asset-builder')('./assets/manifest.json').globs.css
[ { type: 'css',
    name: 'main.css',
    globs: 
      [ 'assets/vendor/fontello-bb972d67/css/afpf_fontawesome.css',
         'assets/styles/main.scss' ] } ]

And I copied the paths to the globs from that output and opened them from the shell to confirm they exist.

Searching through the compiled main.css for the selectors used in afpf_fontaweswome.css didn’t turn up any matches, which indicates to me that those styles aren’t being overridden from elsewhere.

Thanks,

– Matt

4

Yeah good call on running in your theme dir, that’s where I meant :+1:

Try nuking your node_modules/ and bower_components/ directories and doing a fresh

$ npm install && bower install && gulp

I haven’t been able to reproduce this—in fact I mirrored your filename with dirs and all, worked first time without an issue.

Also, which version of Sage are you using? If you don’t know then please paste your package.json contents.

2 Likes
5

Deleting node_modules/ and bower_components/ and rebuilding using the command you provided worked! The styles from the vendor stylesheet are showing up in main.css now.

Thanks so much for your help!

1 Like
6

Glad it worked out :+1:

1 Like