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