CODEWITHSUNDEEP
ruby-on-railstwitter-bootstrapsass
Dick Kirkland
Dick Kirkland

Reputation: 119

Using Bootstrap SASS w/Rails 5 without a gem

I had no luck with the official TBS gem.

Instead, I've installed all of the required .js and .scss files in my vendor directory.

in my applications.css.scss, I have...

@import "bootstrap/scss/bootstrap";
@import "historical-bs-custom";

the other SASS files are also within the /scss directory above. These are the components I thought would get loaded by the @import statements in the main bootstrap.scss by default. Ex. _alert.scss, _badge.scss, etc.

in my application.js, I have...

//= require rails-ujs
//= require turbolinks
//= require jquery-3.3.1.slim.min
//= require popper.min
//= require bootstrap/bootstrap
//= require_tree .

Seen in source code view of the page, .js loads fine, but my CSS does not at all.

My gemfile specifies that it is using 

gem 'sass-rails', '~> 5.0'

I thought this would be enough to preprocess the SASS. I also added the 

# Bootsrap sass specific gem
gem 'bootstrap-sass'

but had no luck.

I was hoping to be able to use SASS variables along with custom CSS rules for this application. Most of the documentation on the internets relates to gem usage, which I found I was not the only one having trouble with.

Anyone out there trying to do such a thing without a gem? Any advice or insight would be greatly appreciated.

Thanks in advance.

Upvotes: 1

Views: 812

Answers (1)

Dick Kirkland
Dick Kirkland

Reputation: 119

I was able to get the SASS to preprocess by amending the code as seen below, using the @import statements outside of the initial default commenting that are in application.css.scss files.

/*
* This is a manifest file that'll be compiled into application.css,        which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll   appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*/
@import "bootstrap/scss/bootstrap";
@import "historical-bs-custom";
@import "test";

At first, when using VSCode, I got bad syntax highlighting, so I backed off. A very nice coworker and friend had me try this again. Now I can get on with my life.

Upvotes: 1

Related Questions