I have an app that uses Webpack. I'm new to Webpack and trying to learn how to use it effectively. Specifically, I'm trying to import Bootstrap with Font Awesome into my project. I found this SO post, however, I am still unable to use Bootstrap. I'm not sure if it's out-of-date, or if I'm misunderstanding something.
I tried loading Bootstrap and Font Awesome via the url-loader. I was referencing the following URLs:
.0.0-alpha.4/css/bootstrap.min.css
.3.0/css/font-awesome.min.css
I also tried using loading Bootstrap and Font Awesome via NPM and then referencing it in my entry file like this:
require('bootstrap');
require('font-awesome');
It seems like this should be part of a monly used template. However, I'm not finding one. How do I use Bootstrap and Font Awesome with Webpack?
However, I've e up short with that approach as well.
I have an app that uses Webpack. I'm new to Webpack and trying to learn how to use it effectively. Specifically, I'm trying to import Bootstrap with Font Awesome into my project. I found this SO post, however, I am still unable to use Bootstrap. I'm not sure if it's out-of-date, or if I'm misunderstanding something.
I tried loading Bootstrap and Font Awesome via the url-loader. I was referencing the following URLs:
https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.4/css/bootstrap.min.css
https://maxcdn.bootstrapcdn./font-awesome/4.3.0/css/font-awesome.min.css
I also tried using loading Bootstrap and Font Awesome via NPM and then referencing it in my entry file like this:
require('bootstrap');
require('font-awesome');
It seems like this should be part of a monly used template. However, I'm not finding one. How do I use Bootstrap and Font Awesome with Webpack?
However, I've e up short with that approach as well.
Share Improve this question edited Jan 19, 2018 at 18:24 Stanislav Mayorov 4,4625 gold badges26 silver badges47 bronze badges asked Jul 5, 2017 at 12:12 user687554user687554 11.2k26 gold badges82 silver badges142 bronze badges 5-
Why don't it work
require('bootstrap'); require('font-awesome');
in entry file? Do you have any errors? Can you add webpack config file? – Stanislav Mayorov Commented Jul 5, 2017 at 19:08 -
@StanislavMayorov When I do
require('bootstrap');
the bootstrap CSS simply does not load. I installed bootstrap usingnpm install bootstrap --save-dev
. I can seebootstrap
in thenode_modules
directory. I can successfully runwebpack
from the mand-line withrequire('bootstrap')
in my entry-file. However, the CSS simply is not loaded when I visit the web page. – user687554 Commented Jul 6, 2017 at 14:43 - You must add loaders for css and fonts in your config. And don't forget to import jquery because it needs for bootstrap. – Stanislav Mayorov Commented Jul 6, 2017 at 21:05
-
@StanislavMayorov I have
css-loader
andurl-loader
in my config file. However, I do not see any font-specific loaders listed in the loaders: webpack.js/loaders. – user687554 Commented Jul 7, 2017 at 14:19 -
Have you tried installing the npm packages for bootstrap and font awesome? npmjs./package/bootstrap-webpack npmjs./package/font-awesome-webpack That will put the files into
node_modules
and you should be able to import or require them. – Håken Lid Commented Jul 8, 2017 at 13:29
2 Answers
Reset to default 7 +100I have created a simple example on GitHub. Webpack 2 and Bootstrap 3 are used.
Install dependency npm install jquery bootstrap
index.js
require('bootstrap');
require('bootstrap/dist/css/bootstrap.css');
require('font-awesome/css/font-awesome.css'); //Optional. The question author uses this package.
webpack
const webpack = require('webpack');
const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: path.resolve(__dirname, "index.js"),
output: {
path: path.resolve(__dirname, 'dist'),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
use: [{
loader: "file-loader"
}]
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin('bundle.styles.css'),
new webpack.ProvidePlugin({
// inject ES5 modules as global vars
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
]
};
index.html
<link rel="stylesheet" type="text/css" href="/dist/bundle.styles.css">
<script type="text/javascript" src="/dist/bundle.js"></script>
You can use HtmlWebpackPlugin
if don't want to insert bundle.styles.css
and bundle.js
manually.
if you are not generating your base HTML file dynamically then you can symply include a <link>
tag in your base html's head section (means same base html file everywhere)
and if you want to use it using webpack then along with url-loader you need to use either style-loader
and css-loader
(if you want to insert the style as style
tag in head witch is probabbly not the case)
or you can use webpack's extract to text
plugin to load as a different file and insert it using html link
tag
for reference you can use this open source project's configration file
webpack production config
and
webpack developement config
edit: link update