javascript - Preferred way of using Bootstrap in Webpack

Question

Ask a Question

Welcome To Ask or Share your Answers For Others

javascript - Preferred way of using Bootstrap in Webpack

asked Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

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 :)

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

124 views

1 Answer

深蓝 · Answer 1 · 2021-10-17T03:05:41+0000

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 bootstrap@4.0.0-alpha.5

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>

Categories

javascript - Preferred way of using Bootstrap in Webpack

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags