Skip to content

Instantly share code, notes, and snippets.

@it6c65
Last active March 25, 2020 02:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save it6c65/3467eacbd2224b713f04eedfe3f9b77e to your computer and use it in GitHub Desktop.
Save it6c65/3467eacbd2224b713f04eedfe3f9b77e to your computer and use it in GitHub Desktop.
Rails 6 + Boostrap 4
// el que esta en app/javascript/packs
// Se agrega el js de bootstrap abajo de por los defecto, generalmente require("channels")
require("bootstrap")
//Y los estilos
require("../estilos/archivo.scss")
/* Se agrega la siguiente linea (la direccion de bootstrap dentro de node_modules) */
@import "bootstrap/scss/bootstrap";
// config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
}))
module.exports = environment
//generalmente la primera y ultima linea ya estan declaradas (environment)
//De la linea 3 a la 9 simplemente copia-pega
//Todo esto lo que hace es configurar Jquery y Poppler para poder usarlo con bootstrap y en JS

Cuando tengas que instalar Bootstrap en Rails, recuerda que ya Sprockets lo consideran obsoleto , y en cualquier momento le quitan el soporte , es por eso que la mejor forma de hacerlo en Rails 6, es con Webpacker (el Wrapper de Webpack), por lo que casi todo se hace por JS y tendremos que crear una carpeta de los estilos en la carpeta javascript de Rails

yarn add bootstrap jquery popper.js

No olvides que Webpack usa Yarn por defecto Post-data: Aunque stylesheet_pack_tag en el layout parezca inutil, no lo borres, porque se utiliza en producción

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment