First of all make sure you've created a rails app with the --webpack
flag, like this
rails new APP_NAME --webpack
# If you have, don't run the command again!
Ensure you have bootstrap and it's dependencies
yarn add bootstrap
yarn add jquery popper.js
Ensure you have the following gems in your Rails Gemfile
# Gemfile
gem 'autoprefixer-rails'
gem 'font-awesome-sass', '~> 5.6.1'
gem 'simple_form'
In your terminal, generate SimpleForm Bootstrap config.
bundle install
rails generate simple_form:install --bootstrap
Then replace Rails' stylesheets by Le Wagon's stylesheets:
rm -rf app/assets/stylesheets
curl -L https://github.com/lewagon/stylesheets/archive/master.zip > stylesheets.zip
unzip stylesheets.zip -d app/assets && rm stylesheets.zip && mv app/assets/rails-stylesheets-master app/assets/stylesheets
And the viewport in the layout
<!-- app/views/layouts/application.html.erb -->
<head>
<!-- Add these line for detecting device width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- [...] -->
</head>
Make sure you change the webpack config with the following code to include jQuery & Popper in webpack:
// config/webpack/environment.js
const { environment } = require('@rails/webpacker')
// Bootstrap 4 has a dependency over jQuery & Popper.js:
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
})
)
module.exports = environment
Finally import bootstrap:
// app/javascript/packs/application.js
import 'bootstrap';
And add this to application.html.erb
<!-- app/views/layouts/application.html.erb -->
<!-- [...] -->
<%= javascript_include_tag "application" %> <!-- from app/assets/javascripts/application.js -->
<%= javascript_pack_tag "application" %> <!-- from app/javascript/packs/application.js -->
</body>
Look at your main application.scss
file to see how SCSS files are imported. There should not be a *= require_tree .
line in the file.
// app/assets/stylesheets/application.scss
// Graphical variables
@import "config/fonts";
@import "config/colors";
@import "config/bootstrap_variables";
// External libraries
@import "bootstrap/scss/bootstrap"; // from the node_modules
@import "font-awesome-sprockets";
@import "font-awesome";
// Your CSS partials
@import "components/index";
@import "pages/index";
For every folder (components
, pages
), there is one _index.scss
partial which is responsible for importing all the other partials of its folder.
Example 1: Let's say you add a new _contact.scss
file in pages
then modify pages/_index.scss
as:
// pages/_index.scss
@import "home";
@import "contact";
Example 2: Let's say you add a new _card.scss
file in components
then modify components/_index.scss
as:
// components/_index.scss
@import "card";
Our layouts/_navbar.scss
code works well with our home-made ERB template which you can find here:
Don't forget that *.html.erb
files go in the app/views
folder, and *.scss
files go in the app/assets/stylesheets
folder. Also, our navbar have a link to the root_path
, so make sure that you have a root to: "controller#action"
route in your config/routes.rb
file.