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 ...
随机推荐
- Trump就职演说
美东时间1月20日,特朗普在美国国会大厦宣誓就职,正式成为第45任美国总统.特朗普在就职演说中说,"我们曾经致力于保卫其他国家的领地,却忽略了我们自己的领土.我们曾经将成千上万亿美元转移到海 ...
- 问题解决了,可是为什么呢?could not find the main class.program will exitmain
今天重新学习socket编写简单的在线聊天,简单功能实现的情况下,一时心血来潮便想要把这程序打成可执行的jar包,以便于在桌面直接双击运行. 参照自己之前写的那篇<>打好两个jar包以后却 ...
- FusionCharts封装-单系列图
ColumnChart.java: /** * @Title:ColumnChart.java * @Package:com.fusionchart.model * @Description:柱形图 ...
- 利用ffmpeg将H264流 解码为RGB
利用H264解码分为几个步骤: 注意一点在添加头文件的时候要添加extern "C",不然会出现错误 [cpp] view plaincopy extern "C&quo ...
- org.springframework.beans.factory.xml.XmlBeanDefinitionStoreException
1.错误描述 usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] [ -nonaming ] { -help ...
- 微信开发中access_token,js_ticket,时间戳,签名生成工具
Access_token生成工具 工具地址:https://mp.weixin.qq.com/debug 这个工具主要用来验证和生成微信公众号access_token,主要有正确的app_id和app ...
- 图片压缩上传Thumbnailator 插件
一,接口已经写死 public static String upload(String appCode, MultipartFile inputFile) public static String u ...
- Halcon算子--区域特征
当我们想要提取Region时,图像处理后,往往存在几个类似的Region,此时,需要根据Region的一些特殊特征,来选择指定的Region. 求Region指定特征值:region_features ...
- JavaScript设计模式(10)-观察者模式
观察者模式 1. 介绍 发布者与订阅者是多对多的方式 通过推与拉获取数据:发布者推送到订阅者或订阅者到发布者那边拉 使并行开发的多个实现能彼此独立地进行修改 其实我们在前端开发中使用到的时间监听就是浏 ...
- C#图解教程 第十六章 转换
转换 什么是转换隐式转换显式转换和强制转换 强制转换 转换的类型数字的转换 隐式数字转换溢出检测上下文 1.checked和unchecked运算符2.checked语句和unchecked语句 显式 ...