Hi,
I feel like I’m taking crazy pills currently! I just want to add a nice simple CSS file to my theme, and it seems to be nigh on impossible!
I’ve made the following changes in manifest.json:
“bitc-custom.css”: {
“files”: [
“styles/bitc-custom.css”
]
},
The file exists in styles/
I’ve made the following changes in setup.php:
wp_enqueue_style('sage/bitc-custom_css', Assets\asset_path('styles/bitc-custom.css'), false, null);
But the CSS simply doesn’t load! Please help!
So, is this not possible? It seems like such a simple thing!
I managed a JS file via a very similar method. I’m running gulp but not browser-sync. I’ve run gulp manually and using gulp-watch. bitc-custom.js does not appear when gulp processes files.
For information, here are the threads that I’ve already looked at:
https://discourse.roots.io/t/how-do-we-include-js-and-css-dependencies-in-sage-9/8574/5
https://discourse.roots.io/t/sage-9-npm-start-removes-dist-style-main-css/7838/15
https://discourse.roots.io/t/adding-a-separate-ie-stylesheet/4007/3
Thank you in advance for your assistance.
Hi Dave,
It’s not clear which version of Sage you’re actually using. The title says Sage 9 but it uses Webpack, not Gulp. A lot changed between the versions and since Sage 9 isn’t finalised yet, there are still gaps in the documentation. It seems that you’re mixing answers from two versions, which might explain your confusion…
Why do you want this CSS file separated from the main one? Is it so you can include it only on certain pages? If it’s not too large, it might be simplest to include it in the main bundle. Also, is it just a static CSS file or does it need pre-processing?
What do you mean exactly? Do you get a 404 error in the network panel? Or is it not even referenced in the HTML?
Hi Stephen,
Sorry, you’re completely right - I had it in my head for some reason that I was using Sage v9, but upon looking at gulp - I see 8.5.2.
The error from the console is indeed:
Error 404: /dist/styles/bitc-custom.css not found
And I can’t find that file on the file-system.
You’re also 100% right that I’m mixing myself up, I’m a bit out of my depth 
I don’t understand SCSS fully yet, so I want to include a basic CSS file on my site until I can learn it properly - so basically this file will load on every single page.
When you say ‘include it in the main bundle’ - would I literally just add bitc-custom.css into the main section files?
Sorry for my lack of understanding and thanks for the help!
{
“dependencies”: {
“main.js”: {
“files”: [
“scripts/main.js”
],
“main”: true
},
“main.css”: {
“files”: [
“styles/main.scss”
],
“main”: true
},
“customizer.js”: {
“files”: [
“scripts/customizer.js”
]
},
“bitc-custom.js”: {
“files”: [
“scripts/bitc-custom.js”
]
},
“bitc-custom.css”: {
“files”: [
“styles/bitc-custom.css”
]
},
“jquery.js”: {
“bower”: [“jquery”]
}
},
“config”: {
“devUrl”: “http://example.dev”
}
}
Hi Dave,
Don’t worry, it can take a while to get your head around this and there are a lot of moving parts to make it all work! You’ll get there if you persist and it’s definitely worth it 
I think it’s good that you’re using Sage 8 for now because it is more mature. You just have to be careful that you’re not following instructions and code that relates to Sage 9!
With that cleared up, I think the only problem is that your Gulp build process isn’t handling the bitc-custom.css you’ve created and copying it to the dist folder, where the Assets\asset_path() function expects to find it.
Looking at your manifest.json file, it appears that you’ve done everything you need to get this to work, so the first question is: did you run gulp again after changing your manifest.json file? Doing so should recreate the dist folder and process your file from assets/styles/bitc-custom.css.
If that doesn’t work, check to make sure you spelt the file names exactly right. I tried it on a fresh install just now and it worked for me…
Also, I should note that you can easily change your bitc-custom.css filename to bitc-custom.scss and you’ll be able to use SASS features in that file since it will be processed by Gulp.
Yes, you could do something like this:
"main.css": {
"files": [
"styles/main.scss",
"styles/bitc-custom.css"
],
"main": true
},
… and that should process and bundle both those files together into the final dist/styles/main.css
Another way you can do the same thing without messing with the manifest.json file is to tell SASS directly to import the CSS file and output it with all the other CSS. For example, you could do this in your main.scss file:
@import "bitc-custom";
This assumes bitc-custom.css (or bitc-custom.scss) is in the same folder as main.scss - if it’s not, adjust the path accordingly. Don’t add an extension to the file name.
The important thing to understand is that when you don’t include the file extension (.css) in the @import statement, SASS will process and include the contents of that file.
If you wrote @import "bitc-custom.css", then it wouldn’t import the file’s contents, but instead it write a plain CSS import statement like this: @import url(bitc-custom.css); in your final main.css file. As a sidenote, this wouldn’t work because the CSS file wouldn’t have been copied to the dist directory unless you kept your changes in the manifest.json file. Maybe that’s too much detail but it’s useful to understand this because sometimes you might want to include a CSS file from elsewhere outside the normal build process.
Hope that helps Let me know if something doesn’t make sense…
Thank you so much for the detailed explanation! It all makes sense now!
I found the issue - I had a case of Friday-moron-itis : I put the file into dist/styles instead of assets/styles - when I clearly knew this was where it was supposed to be - as I used it previously for the JS!
I took up your advice of adding it into main.scss as this makes perfect sense - Literally the one-liner and everything now works!
Thanks so much for bearing with me!
That’s great! I’m glad you got it working and happy I could help
Hey @Stephen - this is v similar to what i’m trying to do. But i want a separate CSS file with a difference collection of bootstraps.scss files added.
So i’ve created ./assets/styles/pf-journals-main.scss
Added this to manifest.
"pf-journals-main.css": {
"files": [
"styles/pf-journals-main.scss"
],
"pf-journals-main": true
},
and in bower added
"overrides": {
"bootstrap": {
"main": [
"./scss/_functions.scss",
"./scss/_variables.scss",
"./scss/_mixins.scss",
"./scss/_print.scss",
"./scss/_reboot.scss",
"./scss/_type.scss",
"./scss/_images.scss",
"./scss/_grid.scss",
"./scss/_tables.scss",
"./scss/_forms.scss",
"./scss/_buttons.scss",
"./scss/_transitions.scss",
"./scss/_dropdown.scss",
"./scss/_button-group.scss",
"./scss/_input-group.scss",
"./scss/_custom-forms.scss",
"./scss/_nav.scss",
"./scss/_navbar.scss",
"./scss/_media.scss",
"./scss/_list-group.scss",
"./scss/_utilities.scss",
"./js/dist/transition.js"
],
"pf-journals-main": [
"./scss/_functions.scss",
"./scss/_variables.scss",
"./scss/_mixins.scss",
"./scss/_print.scss",
"./scss/_reboot.scss",
"./scss/_utilities.scss",
"./js/dist/transition.js"
]
}
},
However i’ve made a few presumptions and doesn’t seem to work. For a start it does inject
// Automatically injected Bower dependencies via wiredep (never manually edit this block)
// bower:scss
into pf-journals-main.scss even if “pf-journals-main”: true is kept as “main”: true in manifest.
No errors and the ./dist/pf-journals-main.css file is being created.
Do you think what i’m aiming for is possible or m i missing something?
D.
Hey @dpc,
It has been a long time since I’ve done anything with Sage 8 (or Sage for that matter) so I am a bit hazy on the details now… As a matter of interest, is there any reason you’re still using Sage 8 when Sage 9 is now stable?
A few questions about your problem:
What is contained in the dist/pf-journals-main.css file? Is it empty?
Can you clarify what you mean by:
even if “pf-journals-main”: true is kept as “main”: true in manifest
I’m not sure that the snippet you posted from your manifest is correct and I think it should be like this:
"pf-journals-main.css": {
"files": [
"styles/pf-journals-main.scss"
],
"main": true
},
Is that what you already tried?
Instead of trying to get Bower to inject these files, what about doing an @import for those particular Bootstrap files directly from your pf-journals-main.scss? I never use Bootstrap but I assume this could work and it might be simpler than trying to get Bower to handle it.
What is the transition.js file doing in with all the SCSS files in the list? Does Bower separate that out automatically from the CSS? Like I said, it has been a long time since I looked at any of this so I may be asking some dumb questions here…
Thanks for the reply stephen - job is well over now but basically i wanted to create different production css files from the same ‘library’. ie some css files in one and not the other.
Each file was then to be sent to its own server. It was an odd job for 3 sites we had to override the current sites css. Some were just _type and other colours… D.
Ah, I see… What you were trying to do should have worked by adding a new top level SCSS file to the manifest and then inside that file, importing only the Bootstrap modules you wanted. Either way, good that you were able to get the job finished 