Bevorzugte Art und Weise in Webpack Bootstrap der Verwendung

Grüße alle und jeden,Bevorzugte Art und Weise in Webpack Bootstrap der Verwendung

Ich habe um mit Bootstrap für Webpack spielen, aber ich bin an dem Punkt, meine Haare ausreißen. Ich habe buchstäblich viele Blog-Artikel durchgelesen und benutze entweder das 7 Monate veraltete 'bootstrap-webpack'-Plugin (welches überraschenderweise nicht sofort funktioniert) oder .. Sie enthalten die Bootstrap-Dateien durch den Import' node_modules/*/bootstrap/css/bootstrap.css '.

Sicherlich muss es einen saubereren und effizienteren Weg geben, um das zu tun?

Dies ist meine aktuelle webpack.config.js Datei:

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

Ich könnte weitermachen und require('bootstrap') (mit einer gewissen Art und Weise jQuery des Erhaltens in ihm zu arbeiten), aber .. Ich bin gespannt, was Sie alle denken und zu tun .

Vielen Dank im Voraus :)

Quelle

2016-03-21 Nickvda

Dies kann für Sie arbeiten https: // github.com/gowravshekar/bootstrap-webpack – Bikas

Ja, das ist das Modul, das ich erwähnte, das seit Monaten nicht aktualisiert wurde. – Nickvda

Sorry dann. Ich habe keine Ahnung von jetzt. – Bikas

Ich bin nicht sicher, ob dies der beste Weg ist, aber für mich gut mit vue.js Webapp folgenden Arbeiten. Sie können den Arbeitscode here sehen.

Ich habe Dateien von Bootstrap in index.html wie dies erforderlich ist enthalten:

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

Und das funktioniert, können Sie die Repo ausführen kann. Warum ich diesen Weg ging war ich customise einige Konfiguration in bootstrap so musste ich die Variablen-Datei ändern und den Code des Bootstrap, der mich bootstrap.js und bootstrap.css Dateien ausgegeben, die ich hier verwende.

Es gibt eine alternative Art und Weise here vorgeschlagen durch das NPM-Paket mit und webpack Anpassung.

erste Bootstrap in Ihrem Projekt installieren:

npm install [email protected]

Und stellen Sie sicher, dass Sie sass-loader in Ihrer Komponenten verwenden können:

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

Wechseln Sie jetzt zum webpack Config-Datei und fügen Sie ein sassLoader Objekt mit folgendem:

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

projectRoot sollte j ust Punkt, wo Sie node_packages navigieren aus, in meinem Fall ist: path.resolve(__dirname, '../')

Jetzt können Sie direkt in Ihrem .vue Dateien verwenden Bootstrap und webpack wird es für Sie kompilieren, wenn Sie fügen Sie folgendes:

<style lang="scss"> 
    @import "bootstrap"; 
</style>

Quelle

2017-02-21 03:26:38 Saurabh

Danke, das war die eingehende Antwort, die ich gesucht habe! Heres 'zu hoffen, dass sie jQuery früher als später loswerden;) Ich muss eine halbe Stunde warten, bevor ich das Kopfgeld geben kann, aber es kommt :) – Nickvda

Das wird mich aus einer Stelle bekommen, aber sollte nicht benutze ich nicht webpack um meinen Bootstrap zu bündeln? Was ist der Sinn des Webpacks, wenn ich mit Skripten aus meiner index.html verlinke? – bbsimonbb

@ user1585345: Ich hatte den gleichen Gedanken (und das gleiche Problem zu Beginn) – WoJ

Ich empfehle dringend, bootstrap-loader zu verwenden. Sie fügen eine Konfigurationsdatei (in Ihrem Stammordner) hinzu, in der Sie die Bootstrap-Elemente, die Sie nicht möchten, ausschließen und angeben können, wo sich Ihre variables.scss und bootstrap.overrides.scss befinden. Definieren Sie SCSS-Variablen, führen Sie Ihre Überschreibungen durch, fügen Sie Ihren Webpack-Eintrag hinzu und machen Sie sich mit Ihrem Leben weiter.

Quelle

2017-08-10 15:43:16

Bevorzugte Art und Weise in Webpack Bootstrap der Verwendung

Antwort

Verwandte Themen