Webpack 引入bootstrap
Bootstrap中是一种事实上的界面标准,标准到现在的网站大量的使用它。如果可以使用webpack引入的bootstrap.css,就可以一个npm install完成项目的依赖,而不必手工的添加到html内。
复制代码 然后安装依赖:
复制代码 实际上却不是想象的那么简单。因为css文件内还引用了很多类型的字体文件和矢量图文件。要引入它,必须同时提供css之外的类型的对应的loader:
复制代码 我们在html文件内使用那么一点点的bootstrap:
复制代码 再次执行转译:
复制代码 打开浏览器:
复制代码 看到bootstrap那熟悉而太熟悉的界面。 引入jquery 如果需要使用bootstrap的js插件的话,就必须首先引入jquery。引用jquery的一个方法是使用webpack插件。 首先安装jquery:
复制代码 其次使用插件装入jquery,方法是修改webpack的配置文件,加入:
复制代码 在入口文件内加入代码来做验证:
复制代码 如果成功,说明jquery加载成功。这样你就可以在入口js文件内加载bootstrap.js了:
复制代码 排除错误 我确实在引入bootstrap的时候,遇到一个神奇的错误。在webpack转译时报错,css-loader,unknown word样子的错误。对webpack.config.js文件加入一个include属性并指向到不存在的目录即可。
复制代码 原始的issue在此:https://github.com/webpack/cs... 。我看看看到此答案时以为是个玩笑。 |
Webpack 引入bootstrap的更多相关文章
- webpack 引入 bootstrap
Bootstrap中是一种事实上的界面标准,标准到现在的网站大量的使用它.如果可以使用webpack引入的bootstrap,就可以一个npm install完成项目的依赖,而不必手工的添加到html ...
- vue引入bootstrap——webpack
想要在vue中引入bootstrap,引入的时候需要按照如下的步骤进行. 1.引入jquery 2.引入bootstrap 阅读本文前,应该能够搭建环境,使用vue-cli进行项目的创建,可以参考 ...
- vue项目引入bootstrap、jquery
在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...
- vue-cli如何引入bootstrap工具
以下操作以正常安装node环境为前提. 1.引入jq: 在npm控制台中,进入项目目录,然后输入指令npm install jquery --save-dev(npm换成cnpm更好,国内环境下使用c ...
- vue2.x利用脚手架快速构建项目并引入bootstrap、jquery
要使用vue-cli脚手架搭建项目,首先需要安装node.js Node.js官网:https://nodejs.org/en/download/ 选择你对应的系统即可下载,下载完成后傻瓜式安装即可. ...
- Vue中引入bootstrap导致的CSS问题
最近在进行vue.js+webpack进行模块化开发的时候,遇到一个奇怪的问题. 问题是这样的: 1. 在main.js文件中引入bootstrap的js和css. 2. 自己写了一个Header.v ...
- vuejs 使用vue-cli引入bootstrap
前言:对于刚刚进入vuejs的队伍中的小白来讲,很多都是模糊的,js操作dom节点的思想萦绕,还不能自由切换在二者之间. 解决之道: 想要在vue中引入bootstrap,引入的时候需要按照如下的步骤 ...
- 在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。
在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...
- vue项目中引入bootstrap
(1)引入Jquery文件,需要在bootstrap.min.js 之前引入. 1.npm install jquery --save-dev 2. plugins: [ new webpack.Pr ...
随机推荐
- 微信 Tinker 的一切都在这里,包括源码
最近半年以来,Android热补丁技术热潮继续爆发,各大公司相继推出自己的开源框架.Tinker在最近也顺利完成了公司的审核,并非常荣幸的成为github.com/Tencent上第一个正式公开的项目 ...
- [php]在PHP中读取和写入WORD文档的代码
测试平台windows 使用的windows的com主键. <? // 建立一个指向新COM组件的索引 $word = new COM("word.application") ...
- javascript学习笔记02--面向对象学习
js面向对象编程 1. javascript 是一种基于对象的编程 object-based(基于对象):遇到的所有对象都是对象2.javascript没有类class,但是有新的原型对象,习 ...
- R语言︱数据集分组、筛选(plit – apply – combine模式、dplyr、data.table)
R语言︱数据集分组 大型数据集通常是高度结构化的,结构使得我们可以按不同的方式分组,有时候我们需要关注单个组的数据片断,有时需要聚合不同组内的信息,并相互比较. 一.日期分组 1.关于时间的包都有很多 ...
- TI AM335X处理器介绍
AM335X是美国TI(德州仪器)公司基于 ARM Cortex-A8内核的AM335X微处理器,在图像.图形处理.外设方面进行了增强,并全面支持诸如 EtherCAT 和 PROFIBUS等工业接口 ...
- javax.servlet.JspTagException:Illegal use of <when>-style tag without <choose >as its di
1.错误描述 javax.servlet.JspTagException:Illegal use of <when>-style tag without <choose >as ...
- [BZOJ1212][HNOI2004]L语言
BZOJ Luogu sol 设\(f_i\)表示文章的前\(i\)个字符是否可以被理解.每次匹配要暴跳\(fail\)到根,转移就是\(f_i|=f_{i-len}\),其中\(len\)是某个可以 ...
- 剑指offer-(20)包含min函数的栈
题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈最小元素的min函数. 题目分析 首先一开始我们分析得到最小值肯定要比较嘛,和栈里面的数据一一比较,但是栈这种数据结构,你又只能和栈顶弹出来的 ...
- RBM如何训练?
RBM(Restricted Boltzman Machine,受限玻尔兹曼机)是深度学习的基础,虽然原理比较简单,但实际训练中用到了很多trick,在参考文献中,Hinton为我们披露了几个训练的细 ...
- ES6的模块化规范和CommonJS的模块化规范的差异
ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,旨在成为浏览器和服务器通用的模块解决方案.其模块功能主要由两个命令构成:export 和 import.export命令用于规定模块的对 ...