CODEWITHSUNDEEP
ruby-on-railsrubyimportsassbootstrap-4
dsp_099
dsp_099

Reputation: 6121

Importing Bootstrap as SCSS in Rails 5.2

I have a legacy Rails app which I'm trying to improve. I have a set of styles that I'd like to import and one of them is Bootstrap 4.

I have the following file app/assets/stylesheets/application.scss

Attempting to go require_tree . causes some errors so I'd like to go one-by-one starting with bootstrap.

In my Gemfile: gem 'bootstrap'

In the above mentioned application.scss: 

/*
*= require_self
*/

// Bootstrap
@import 'bootstrap';

What's interesting is that although importing from this file/folder set "works" in that if something is off the app breaks but if all goes well like with the bootstrap import, on the actual website there is no .css file being imported.

What's the tl;dr on setting up and importing sass files and the bootstrap library in Rails 5.2?

It should be so simple but I've been banging my head against a wall for hours now. Why don't the styles show up if they compile?

Is there an example of a site you can think of I can look at and see the diff which uses scss? It should be stupid simple but it's just not showing the result of compilation.

Upvotes: 2

Views: 752

Answers (2)

CamiloVA
CamiloVA

Reputation: 731

Rails 5.2 changes the way it handles target resulting files compiled by sprockets, it can be related to:

https://github.com/rails/sprockets/blob/master/UPGRADING.md

Upvotes: 0

widjajayd
widjajayd

Reputation: 6253

since you mentioned rails 5.2 (NOT rails 6) then this below steps may work with your environment

inside your app/assets/stylesheets/application.css

/*
*= require_self
*= require main
*/

it's using css file but calling main.scss (which is located in same folder)

then inside app/assets/stylesheets/main.css you can import any scss using import

// bootstrap
@import "bootstrap";
// basic scss 
@import "basic/bodi_and_font.scss";
@import "basic/datepicker.scss";

I'm using bootstrap 4 and above is some sample additional scss that I'm imported inside specific folder

Upvotes: 1

Related Questions