Add a simple CSS file to Sage 8.5.2

sage
5

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 :slight_smile:

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 :slight_smile: Let me know if something doesn’t make sense…

3 Likes