Menu
Greetings one and all,
I have been playing around with Bootstrap for Webpack, but I'm at the point of tearing my hair out. I have literally gone through loads of blog articles and they either use the 7 months outdated 'bootstrap-webpack' plugin (which, surprisingly does not work out of the box) or.. They include the Bootstrap files through import 'node_modules/*/bootstrap/css/bootstrap.css'.
Surely, there must be a cleaner and more efficient way of going about this?
This is my current webpack.config.js file:
var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var autoprefixer = require('autoprefixer'); var path = require('path'); module.exports = { entry: { app: path.resolve(__dirname, 'src/js/main.js') }, module: { loaders: [{ test: /\.js[x]?$/, loaders: ['babel-loader?presets[]=es2015&presets[]=react'], exclude: /(node_modules|bower_components)/ }, { test: /\.css$/, loaders: ['style', 'css'] }, { test: /\.scss$/, loaders: ['style', 'css', 'postcss', 'sass'] }, { test: /\.sass$/, loader: 'style!css!sass?sourceMap' },{ test: /\.less$/, loaders: ['style', 'css', 'less'] }, { test: /\.woff$/, loader: "url-loader?limit=10000&mimetype=application/font-woff&name=[path][name].[ext]" }, { test: /\.woff2$/, loader: "url-loader?limit=10000&mimetype=application/font-woff2&name=[path][name].[ext]" }, { test: /\.(eot|ttf|svg|gif|png)$/, loader: "file-loader" }] }, output: { path: path.resolve(__dirname, 'dist'), filename: '/js/bundle.js', sourceMapFilename: '/js/bundle.map', publicPath: '/' }, plugins: [ new ExtractTextPlugin('style.css') ], postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ], resolve: { extensions: ['', '.js', '.sass'], modulesDirectories: ['src', 'node_modules'] }, devServer: { inline: true, contentBase: './dist' } }; I could go and require('bootstrap') (with some way of getting jQuery in it to work), but.. I'm curious to what you all think and do.
Thanks in advance :)
489
Here are a few ways to use Bootstrap 5 with React JS: Download the raw compiled code or source files and include it locally on your React JS app. Use Content Delivery Network (CDN) via jsDeliver cached version of Bootstrap's compiled CSS and JS to your React JS app project.
I am not sure if this is the best way, but following work for me well with vue.js webapp. You can see the working code here.
I have included files required by bootstrap in index.html like this:
<head> <meta charset="utf-8"> <title>Hey</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> <link rel="stylesheet" href="/static/bootstrap.css" type="text/css"> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script> <script href="/static/bootstrap.js"></script> </head> And this works, you can execute the repo. Why I went this way was I had to customise some config in bootstrap so I had to change the variables file and build the code of bootstrap which outputted me bootstrap.js and bootstrap.cssfiles, which I am using here.
There is an alternative way suggested here by using the npm package and a webpack customisation.
First install bootstrap in your project:
npm install [email protected] And make sure you can use sass-loader in your components:
npm install sass-loader node-sass --save-dev now go to your webpack config file and add a sassLoader object with the following:
sassLoader: { includePaths: [ path.resolve(projectRoot, 'node_modules/bootstrap/scss/'), ], }, projectRoot should just point to where you can navigate to node_packages from, in my case this is: path.resolve(__dirname, '../')
Now you can use bootstrap directly in your .vue files and webpack will compile it for you when you add the following:
<style lang="scss"> @import "bootstrap"; </style> 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
