在Webpack中使用Bootstrap的首选方式

JavaScript

米亚Eva

2020-03-12

大家问候

我一直在使用Bootstrap for Webpack,但是我正要拔头发。我从字面上看了很多博客文章,他们要么使用了7个月过时的“ bootstrap-webpack”插件(令人惊讶的是,它不能立即使用),要么..它们通过导入'node_modules / * /包含了Bootstrap文件。 bootstrap / css / bootstrap.css”。

当然,必须有一种更清洁,更有效的方法来解决此问题吗?

这是我当前的webpack.config.js文件:

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'
    }
};

我可以去require('bootstrap')(通过某种方式使jQuery正常工作),但是..我很好奇你们所有人的想法和行为。

提前致谢 :)

第1056篇《在Webpack中使用Bootstrap的首选方式》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
6的不行 2020.03.12

我强烈建议使用bootstrap-loader.bootstraprc在根文件夹中添加了一个配置文件,可以在其中排除不需要的引导元素,并告诉您variables.scssbootstrap.overrides.scss哪里定义您的SCSS变量,进行覆盖,添加Webpack条目并继续生活。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android