Bootstrap 4, custom.scss, and bootstrap blocks - @import

General
, ,
1

What is the proper way to import CSS files to custom.scss in a Bootstrap 4 project?

My goal is to have one compiled CSS file in the end.

What I did:

  1. Created a Bootstrap 4 project
  2. Created custom.scss using “Customize & update Bootstrap Theme”
  3. Activated Bootstrap 4 Blocks
  4. Added a block to a page. blocks.css was automatically added to top-level.
  5. Added @import "../blocks"; to custom.scss as outlined in https://sass-lang.com/documentation/at-rules/import#importing-css. Saved file.

Result:
This creates a new blank blocks.scss at top-level and blocks.css content is not imported into the compiled bootstrap/css/bootstrap.css file as expected.

Why is it creating the blank blocks.scss file and not just importing the contents of blocks.css into the compiled bootstrap.css file?

I have used other Sass compilers following https://sass-lang.com/documentation/at-rules/import#importing-css and have not experienced this @import issue.

I have other CSS files (like animate.css) I want to import into custom.scss as well, so any guidance would be appreciated.

Thanks.

2

Hi @chitown,
Pinegrow uses LibSass as its processor. As of a version (or so) ago, supporting the import of .css files was deprecated. This was because of technical specifications in the original SASS language (lots of argument about this one!). A work-around to this (but you have to be careful) is to give the files a ‘.scss’ extension and then @import. The processor will treat these files as sass files and process them, so your files should be pretty plain css without variables and the like. Otherwise, you need to go with an outside processor where you can install an extension as workaround or use dart.
Cheers,
Bob

1 Like
3

@RobM Interesting. Thanks for sharing. I thought I was doing something wrong, but it appears it is working as expected.

I guess I will have to reconsider my workflow and merge CSS files together another way. Always try to limit files loaded for page speed. Changing file extensions would not work with something like animate.css that has a lot of files to import.

Thanks again.

4

You could copy your additional css to custom.scss and it will appear at the bottom of the bootstrap.css that’s the idea of the Pinegrow scss setup! :wink: With clear comments of course. So you end up with one dist (distribution) file bootstrap.css

5

Yeah, if you are consolidating a lot of CSS it makes sense to look into Gulp or something of that type.

6

…which segways nicely into my recent query post about Node etc…
as Id just got to exploring Bower, and now
GULP

Would it be worth some sort of TUTORIAL or such like exploring different sorts of Pro set ups?
Worded for both those Pros… and beginners to try it out?