I am not great at webpack. I have not really 'learned it', I have a template/boilerplate I pull from a repo I made that gives me an environment to build in React. I am struggling to add bootstrap functionality to my projects because I am not great with webpack and understanding how loaders etc. work. Can someone give me a hand? And maybe a simple explanation about webpack loaders? (It is on my list to learn it, but just not a priority).
I get strange errors like:
ERROR in ./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2
Here is my webpack.config.js
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
var config = {
entry: APP_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module : {
loaders : [
{
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel'
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
]
}
};
module.exports = config;
Here is my package.json
{
"name": "react-camper-leaderboard",
"version": "1.0.0",
"description": "freecodecamp leaderboard sorter",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack -d --watch",
"build": "webpack -p"
},
"author": "Tim Bell",
"license": "ISC",
"dependencies": {
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"bootstrap": "^4.0.0-alpha.2",
"bootstrap-loader": "^1.0.8",
"bootstrap-sass": "^3.3.6",
"css-loader": "^0.23.1",
"file-loader": "^0.8.5",
"node-sass": "^3.4.2",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"resolve-url-loader": "^1.4.3",
"sass-loader": "^3.1.2",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7"
},
"devDependencies": {
"css-loader": "^0.23.1",
"node-sass": "^3.4.2",
"sass-loader": "^3.1.2",
"webpack": "^1.12.13"
},
"babel": {
"presets": [
"es2015",
"react"
]
}
}
If you happen to have a custom Webpack setup, you may be wondering how to set up SASS with Webpack. This short tutorial walks you through the process. First of all, you need to install a SASS loader and a SASS to your dev dependencies: And second, you can use the SASS loader for all CSS and SCSS files in your Webpack configuration: ... ... ... ...
Webpack needs to distinguish between bootstrap and ~bootstrap because CSS and Sass files have no special syntax for importing relative files. Writing @import "style.scss" is the same as @import "./style.scss"; Problems with url (...)
This allows you to control the versions of all your dependencies, and to choose which Sass implementation to use." Essentially this loader has internal dependencies which require node-sass. sass-loader loads a Sass/SCSS file and compiles it to CSS. Now let's update the webpack.config.js.
To build its template, Bootstrap uses SASS as source CSS files, REM as primary CSS unit and Flexbox for its grid system. In this series, our objective is to cover all you need to know about Sass, Bootstrap, and Webpack to start creating your website:
Checkout the example from the sass-loader. Your webpack.config.js
should look like this:
module.exports = {
...
module: {
loaders: [
{
test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
loader: "file"
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
]
}
};
Since you've added a bunch of loaders, you should make sure that all of them are installed:
npm i file-loader style-loader css-loader sass-loader --save-dev
Then you should add your main.scss
either as webpack entry to webpack.config.js
...
module.exports = {
...
entry: [
path.resolve(__dirname, '..', 'path', 'to', 'main.scss'),
// add other entries
],
...
... or just require/import it in your main.js
:
require("./path/to/main.scss");
Since bootstrap needs its url()
paths configured, you need to set the $icon-font-path
before importing bootstrap. Your main.scss
should look like this:
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/bootstrap";
And if you think @import "~bootstrap-sass/assets/stylesheets/bootstrap";
looks ugly, you can also add an alias to your webpack.config.js
:
module.exports = {
...
resolve: {
alias: {
"bootstrap-sass$": "bootstrap-sass/assets/stylesheets/bootstrap"
}
},
Then you just need to write:
@import "~bootstrap-sass";
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With