Rails6将默认使用webpack代替asset:

本文讲述如何自己配置。

参考:

https://getbootstrap.com/docs/4.1/getting-started/webpack/

https://github.com/rails/webpacker

https://gorails.com/episodes/how-to-use-bootstrap-with-webpack-and-rails?autoplay=1

步骤:

安装:

//后两个是依赖
yarn add bootstrap jquery popper.js

配置:

#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 备注:
new webpack.ProvidePlugin(),自动load模块无需每次都import或require.
https://webpack.js.org/plugins/provide-plugin
#app/javascript/packs/application.js添加
import 'bootstrap'
import '../stylesheets/application' document.addEventListener('turbolinks:load', ()=>{
$('[data-toggle="tooltip"]').tooltip()
$('[data-toggle="popover"]').popover()
}) #新建app/javascript/stylesheets/application.scss。
@import "~bootstrap/scss/bootstrap";

完成配置!可以使用Bootrap4了。

附录:rails/webpacker

rails5需要手动安装webpack。rails6默认使用webpack了!

结构:

app/javascript:
├── packs:
│ # only webpack entry files here
│ └── application.js
└── src:
│ └── application.scss
└── images:
└── logo.svg

在view上使用webpack:

<%= javascript_pack_tag 'application' %>

如果在pack文件中引进了styles:使用

Rails 用Webpack安装Bootstrap(附录webpack使用)的更多相关文章

  1. 前端自动化构建工具webpack (一)之webpack安装 和 设置webpack.confi.js

    目的:  模块化开发,组件化开发,让代码符合开发规范,更高效 webpack作用:从pack,就知道这是包的意思,比较专业点叫做前端自动化打包构建工具,代码错误检查,预处理,文件合并(打包),代码压缩 ...

  2. webpack安装,常见问题和基本插件使用

    一:webpack认识 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关 ...

  3. 【JavaScript】 Webpack安装及文件打包

    背景 最近开启一个新项目,需要对前端的各类资源文件进行打包,经过多方调研后,决定使用webpack工具.但是网上的教程多是将webpack直接作为服务器使用,而我只是想将其作为单纯的资源打包工具而已. ...

  4. webpack安装配置使用教程详解

    webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对 ...

  5. webpack 引入 bootstrap

    Bootstrap中是一种事实上的界面标准,标准到现在的网站大量的使用它.如果可以使用webpack引入的bootstrap,就可以一个npm install完成项目的依赖,而不必手工的添加到html ...

  6. 安装node/npm/webpack步骤

    nodejs软件的下载地址:https://nodejs.org/en/ 1.只要安装好了nodejs,就自动安装好了npm包. 2.在cmd中通过命令node -version查看是否安装好node ...

  7. webpack安装配置

    webpack安装 1.安装之前你必须要安装node.js,如果你没安装可以在node.js网去下载node.js 2.全局安装webpack,打开cmd输入npm install webpack - ...

  8. webpack安装入门

    这两天心血来潮,突然想研究下webpack,花了一天时间,看网上有很多教程,不过发现安装的都是比较老的版本.后来发现还是我太年轻了,找技术播客还不如找官方网站.下面是一个webpack的官方网站,里面 ...

  9. webpack安装使用

    一.安装 1.安装node.js,Webpack 需要 Node.js v0.6 以上支持 2.使用npm(软件包管理 )安装webpack (1)全局安装    npm install webpac ...

随机推荐

  1. OSI七层模型非专业简介

    七层模型从下到上分别是:物理层.数据链路层.网络层.传输层.会话层.表示层.应用层. 1.第一层物理层:最简单理解,我们所看到的网线,就是物理层的.物理层是传输媒介,所以无线网络也算是物理层,在线路中 ...

  2. Go语言实例化结构体——为结构体分配内存并初始化

    转自: http://c.biancheng.net/view/66.html 结构体的定义只是一种内存布局的描述,只有当结构体实例化时,才会真正地分配内存.因此必须在定义结构体并实例化后才能使用结构 ...

  3. Redis基础与持久化

    Redis介绍 软件说明 Redis是一款开源的,ANSI C语言编写的,高级键值(key-value)缓存和支持永久存储NoSQL数据库产品. Redis采用内存(In-Memory)数据集(Dat ...

  4. 【3.3】mysql中的Federated存储引擎,远程表,相当于sql server的linked server

    MySQL中针对不同的功能需求提供了不同的存储引擎.所谓的存储引擎也就是MySQL下特定接口的具体实现. FEDERATED是其中一个专门针对远程数据库的实现.一般情况下在本地数据库中建表会在数据库目 ...

  5. 在Hadoop中ResourceManager是干什么的?

    [学习笔记] 1)ResourceManager:马克-to-win @ 马克java社区:防盗版实名手机尾号:73203.当应用程序对集群资源需求时,ResourceManager是Yarn集群主控 ...

  6. C++中如何调用DLL文件

    一.动态链接库简介 动态库链接库英文位DLL,是Dynamic Link Library的缩写形式,DLL不是可执行文件.动态链接提供了一种方法,使进程可以调用不属于其可执行文件代码的函数.函数可执行 ...

  7. find_in_set使用

    FIND_IN_SET(str,strList) str 要查询的字符串 strList 字段名,参数以“,”分隔,如(1,2,6,8) 查询字段(strList)中包含的结果,返回结果null或记录 ...

  8. 杭电2019多校第一场,Problem I,String 2019

    题目描述 Tom has a string containing only lowercase letters. He wants to choose a subsequence of the str ...

  9. Jmeter之梯度式加压(Stepping Thread Group)

    1.添加线程组(Stepping Thread Group) 2.设置数据 学习参考网址:https://www.cnblogs.com/imyalost/p/7658816.html   这个大大的 ...

  10. 怎样理解HTMLCollection接口

    和 NodeList 类似, HTMLCollection 也是一个 类数组对象, 和NodeList不同的是, 它是各种 元素节点 的集合, 且不具有 forEach() 方法, 因此如果不转为真正 ...