# Bootstrap 4, custom.scss, and bootstrap blocks - @import **URL:** \ **Category:** General\ **Tags:** css, blocks, bootstrap4\ **Created:** [February 15, 2021, 2:20am UTC](https://forum.pinegrow.com/t/bootstrap-4-custom-scss-and-bootstrap-blocks-import/4968 "2021-02-15T02:20:13Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![chitown](https://avatars.discourse-cdn.com/v4/letter/c/3ab097/32.png) [@chitown](https://forum.pinegrow.com/u/chitown)\ **Post date:** [February 15, 2021, 2:20am UTC](https://forum.pinegrow.com/t/bootstrap-4-custom-scss-and-bootstrap-blocks-import/4968/1 "2021-02-15T02:20:13Z")
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](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](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. ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [February 15, 2021, 9:25am UTC](https://forum.pinegrow.com/t/bootstrap-4-custom-scss-and-bootstrap-blocks-import/4968/2 "2021-02-15T09:25:26Z")
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 ---
**Author:** ![chitown](https://avatars.discourse-cdn.com/v4/letter/c/3ab097/32.png) [@chitown](https://forum.pinegrow.com/u/chitown)\ **Post date:** [February 15, 2021, 3:52pm UTC](https://forum.pinegrow.com/t/bootstrap-4-custom-scss-and-bootstrap-blocks-import/4968/3 "2021-02-15T15:52:43Z")
@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. ---
**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\ **Post date:** [February 15, 2021, 4:02pm UTC](https://forum.pinegrow.com/t/bootstrap-4-custom-scss-and-bootstrap-blocks-import/4968/4 "2021-02-15T16:02:01Z")
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! 😉 With clear comments of course. So you end up with one dist (distribution) file bootstrap.css ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [February 15, 2021, 6:26pm UTC](https://forum.pinegrow.com/t/bootstrap-4-custom-scss-and-bootstrap-blocks-import/4968/5 "2021-02-15T18:26:44Z")
Yeah, if you are consolidating a lot of CSS it makes sense to look into Gulp or something of that type. ---
**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\ **Post date:** [February 15, 2021, 8:04pm UTC](https://forum.pinegrow.com/t/bootstrap-4-custom-scss-and-bootstrap-blocks-import/4968/6 "2021-02-15T20:04:20Z")
…which segways nicely into my recent query post about Node etc… as Id just got to exploring Bower, and now GULP > **[Quick Start | gulp.js](https://gulpjs.com/docs/en/getting-started/quick-start/)** > > \# Quick Start 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?