Custom admin.css in manifest.json

sage
#1

Hi there,

I’m trying to make custom admin.css file to include only certain partials of my styles.
I need some icons in my wp-admin so I would like to have special css compiled only for admin.

I have added this to manifest file like:

{
  "dependencies": {
    "main.js": {
      "files": [
        "scripts/main.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss"
      ],
      "main": true
    },
    "admin.css": {
      "files": [
        "styles/admin.scss"
      ],
      "main": false
    },
    "jquery.js": {
      "bower": ["jquery"]
    }
  },
  "config": {
    "devUrl": "http://url.dev/"
  }
}

That works fine, but I have a problem that normalize.css is included in my admin.css file and I cannot figure out how to exclude it for only admin.css.
I don’t use bootstrap, but susy instead.

Anyone can point me?
I was reading trough asset-builder docs, but did not got on top of it yet, would appreciate some help.
Or should be done somehow in gulpfile.js?

Thanks

#2

Hi all,

Well looks like I stumbled to a correct solution with more trial and error.
Adding:

"bower": [] instead of "main":false resolved my problem.

Complete working manifest.json below.
This will create admin.css and admin.css.map file in dist folder from all includes in “styles/admin.scss”.
Then you just need to enqueue it.

{
  "dependencies": {
    "main.js": {
      "files": [
        "scripts/main.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss"
      ],
      "main": true
    },
    "admin.css": {
      "files": [
        "styles/admin.scss"
      ],
      "bower": []
    },
    "jquery.js": {
      "bower": ["jquery"]
    }
  },
  "config": {
    "devUrl": "http://fsi.dev/verita"
  }
}
2 Likes