preferowany sposób korzystania z Bootstrap w Webpack

Greetings jednego i wszystkich,preferowany sposób korzystania z Bootstrap w Webpack

I zostały gry z Bootstrap dla Webpack, ale jestem w punkcie łzawienie moje włosy. Dosłownie przeglądałem wiele artykułów na blogu i używałem przestarzałej wtyczki "bootstrap-webpack" z ostatnich siedmiu miesięcy (która, co zaskakujące nie działa po wyjęciu z pudełka) lub .. Zawierają pliki Bootstrap poprzez import 'node_modules/*/bootstrap/css/bootstrap.css ".

Z pewnością musi istnieć czystszy i skuteczniejszy sposób radzenia sobie z tym?

To jest mój obecny 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' 
    } 
};

mogę iść i require('bootstrap') (z jakiś sposób na uzyskanie jQuery w nim do pracy), ale .. Jestem ciekaw, co wszyscy myślą i robią .

Z góry dzięki :)

Źródło

2016-03-21 Nickvda

To może działać dla ciebie https: // github.com/gowravshekar/bootstrap-webpack – Bikas

Tak, to moduł, o którym wspomniałem, że nie był aktualizowany od miesięcy. – Nickvda

Przepraszam. Nie mam pojęcia od teraz. – Bikas

Nie jestem pewien, czy jest to najlepszy sposób, ale po pracy dla mnie dobrze vue.js webapp. Możesz zobaczyć działający kod here.

mam włączone pliki wymagane przez bootstrap w index.html tak:

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

I to działa, można wykonać repo. Dlaczego poszedłem w ten sposób, musiałem customise niektórych konfiguracji w bootstrap, więc musiałem zmienić plik zmiennych i zbudować kod bootstrap, który wypuścił mi bootstrap.js i bootstrap.css plików, których używam tutaj.

Istnieje alternatywny sposób zasugerował here za pomocą pakietu npm i dostosowywanie WebPACK.

Najpierw zainstaluj bootstrap w projekcie:

npm install [email protected]

I upewnij się, można użyć Sass-ładowarka w swoich komponentów:

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

teraz przejdź do pliku konfiguracyjnego WebPACK i dodać obiekt sassLoader z następującym:

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

projectRoot powinien Ust punkt, gdzie można poruszać się z node_packages, w moim przypadku jest to: path.resolve(__dirname, '../')

Teraz można użyć bootstrap bezpośrednio w .vue plików i WebPack skompiluje to dla ciebie, gdy dodasz następujące:

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

Źródło

2017-02-21 03:26:38 Saurabh

Dzięki, że była to odpowiedź, której szukałem! "Mam nadzieję, że pozbędą się jQuery wcześniej niż później;) Muszę poczekać pół godziny, zanim będę mógł dać nagrodę, ale nadchodzi :) – Nickvda

To zabierze mnie z miejsca, ale powinienem czy używam webpacka do pakowania mojego bootstrapu? Jaki jest sens posiadania pakietu internetowego, jeśli łączę się ze skryptami z mojego pliku index.html? – bbsimonbb

@ user1585345: Miałem tę samą myśl (i ten sam problem na początek) – WoJ

Bardzo polecam używanie bootstrap-loader. Dodajesz plik konfiguracyjny (.bootstraprc w folderze głównym), w którym możesz wykluczyć elementy, których nie chcesz i określić, gdzie znajdują się twoje variables.scss i bootstrap.overrides.scss. Zdefiniuj zmienne SCSS, dokonaj przesłonięć, dodaj wpis do swojej listy i wejdź w swoje życie.

Źródło

2017-08-10 15:43:16

preferowany sposób korzystania z Bootstrap w Webpack

Odpowiedz

Powiązane problemy