# Building a Bootstrap App with Rails 7 and SCSS Files

DevFeed: [Building a Bootstrap App with Rails 7 and SCSS Files](<https://devfeed.tech/articles/building-a-bootstrap-app-with-rails-7-and-scss-files-28284.md>)

Original publisher: [Read original article](<http://fuzzyblog.io/blog/rails/2022/06/22/building-a-bootstrap-app-with-rails-7-and-scss-files.html>)

Author: Fuzzygroup

Published: 2022-06-22T06:12:00Z

Content type: tutorial

Language: en

Sources: [Scott Johnson](<https://devfeed.tech/sources/scott-johnson.md>)

Topics: [Rails](<https://devfeed.tech/topics/rails.md>), [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [CSS](<https://devfeed.tech/topics/css.md>)

Tags: [app](<https://devfeed.tech/tags/app.md>), [bootstrap](<https://devfeed.tech/tags/bootstrap.md>), [front-end](<https://devfeed.tech/tags/front-end.md>), [rails](<https://devfeed.tech/tags/rails.md>), [sass](<https://devfeed.tech/tags/sass.md>), [scss](<https://devfeed.tech/tags/scss.md>)

## AI overview

A walkthrough of setting up a Rails 7 application with Bootstrap and SCSS files, including generating the app, adding sassc-rails, copying stylesheets, and managing import order for asset compilation.

## Source excerpt

As is too often the case, I find that the initial aspect of getting a modern app (Bootstrap, Tailwind, React) initially setup to be the most frustrating aspect of Rails. Given that I like to spin up new apps pretty regularly, well, I spend a lot of time being frustrated with an old man's grumbling of: It didn't used to be this hard. No it wasn't this hard. And while I still don't really understand asset compilation, I did recently put together a new app where I pulled in SCSS files using variables from a different app and I can start to see it. This blog post walks through a Rails 7 app using .scss files. Step 1: Rails New Here's your Rails 7 new command to generate a new app with Bootstrap: rails new scss_test1 --css bootstrap Yep. That's it. Whoa!!! There are also options to use Tailwind. I found this technique in the Saeloun article linked below and I will be forever grateful; seriously - thank you. Step 2: Add the Sassc-Rails Gem I believe this Gem is needed as sassc support is officially deprecated. But I might be wrong about this; front end stuff changes with every Rails release so if I'm wrong, well, sigh. gem "sassc-rails" NOTE: Please see the last section "That Mysterious Error"; you may not want this in your Gemfile or: Step 3: Copy In Your SCSS Files If you are pulling in SCSS files then you need to copy them into your: app/assets/stylesheets directory. They can exist elsewhere but that directory is for stylesheets so differing on this point confuses me. Modify Your Include Directives This is the tricky bit and where you simply have to experiment. The thing to understand is that asset compilation is just that - compilation.If you're old school enough that you understand the analogy of your stylesheet files becoming akin to a make file with all the dark magic that entails, perhaps that helps. In your stylesheets directory there will be an initial stylesheet file, for me, it was application_bootstrap.scss and then I had copied in a number of other styleshee