Forma preferida de usar Bootstrap en Webpack


Saludos a todos,

He estado jugando con Bootstrap para Webpack, pero estoy a punto de arrancarme el pelo. Literalmente he pasado por un montón de artículos de blog y que o bien utilizar el 7 meses obsoleto 'bootstrap-webpack' plugin (que, sorprendentemente no funciona fuera de la caja) o.. Incluyen los archivos Bootstrap a través de import ' node_modules/ * / bootstrap / css / bootstrap.css".

Seguramente, debe haber una forma más limpia y eficiente de moverse ¿esto?

Este es mi archivo actual 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'
    }
};

Podría ir y require('bootstrap') (con alguna forma de conseguir que jQuery funcione), pero.. Tengo curiosidad por lo que todos piensan y hacen.

Gracias de antemano:)

Author: Nickvda, 2016-03-21

2 answers

No estoy seguro de si esta es la mejor manera, pero siguiendo el trabajo para mí bien con vue.js webapp. Puede ver el código de trabajo aquí.

He incluido los archivos requeridos por bootstrap en index.html así:

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

Y esto funciona, puedes ejecutar el repo. Por qué me fui de esta manera fue que tuve que personalizar algunos config en bootstrap {[13] } así que tuve que cambiar el archivo de variables y construir el código de bootstrap que me salió bootstrap.js y bootstrap.cssarchivos, que estoy usando aquí.


Hay una forma alternativa sugerida aquí usando el paquete npm y una personalización de webpack.

Primero instale bootstrap en su proyecto:

npm install [email protected]

Y asegúrese de que puede usar sass-loader en sus componentes:

npm install sass-loader node-sass --save-dev

Ahora vaya a su archivo de configuración de webpack y agregue un objeto sassLoader con lo siguiente:

sassLoader: {
    includePaths: [
        path.resolve(projectRoot, 'node_modules/bootstrap/scss/'),
    ],
},

projectRoot solo debe apuntar a dónde puede navegar a node_packages desde, en mi caso esto es: path.resolve(__dirname, '../')

Ahora puedes usar bootstrap directamente en tu .los archivos vue y webpack lo compilarán para usted cuando agregue lo siguiente:

<style lang="scss">
  @import "bootstrap";
</style>
 11
Author: Saurabh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:02:16

Recomiendo encarecidamente usar bootstrap-loader. Agrega un archivo de configuración (.bootstraprc en su carpeta raíz) donde puede excluir los elementos de bootstrap que no desea e indicar dónde están variables.scss y bootstrap.overrides.scss. Defina sus variables SCSS, haga sus anulaciones, agregue su entrada de webpack y continúe con su vida.

 1
Author: Vahid PG,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-10 15:43:16