Non è possibile ottenere bootstrap-Sass a lavorare con webpack

Question

Im seguendo le instrtuctions su the bootstrap-sass-loader page

nel mio package.json ho avuto

"bootstrap-sass": "^3.3.6", 
"bootstrap-sass-loader": "^1.0.9" 

questo è il mio webpack.config.js

module.exports = { 
    entry: ['./app.js'], 
    output: { 
    publicPath: 'http://localhost:8080/', 
    filename: 'build/bundle.js' 
    }, 
    devtool: 'eval', 
    module: { 
    /* used on code before it's transformed */ 
    preLoaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /(node_modules)/, 
     loader: 'source-map' 
     } 
    ], 
    /* used to modify code */ 
    loaders: [ 

     {test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery'}, 
     {test: /\.obj|\.mtl|\.html|\.dae|\.txt/, loader: "raw"}, 
     {test: /\.jsx?$/, exclude: /(node_modules)/, loader: 'babel'}, 
     {test: /\.css$/, loader: 'style-loader!css-loader'}, 
     {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file"}, 
     {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'}, 
     {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream"}, 
     {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml"}, 
     { 
     test: /\.scss$/, 
     /* order from bottom to top, so first sass, autoprefix, css and finally style */ 
     loaders: ['style', 'css', 'autoprefixer?browsers=last 3 versions', 'sass?outputStyle=expanded'] 
     }, 
     { 
     test: /\.(jpe?g|png|gif|svg)$/i, 
     loaders: ['url?limit=8192', 'img'] 
     }, 
     { 
     test: /\.jsx?$/, 
     exclude: /(node_modules)/, 
     loader: 'babel' 
     } 
    ], 
    /* used to modify generated code */ 
    postLoader: [] 
    } 
}; 

per quanto ho capito, devo solo usare

require("bootstrap-sass-loader"); 

nel mio app.js ed essere fatto. ma non posso usare nessuno stile di bootstrap. cosa mi manca qui?

Answer 1

Per il bootstrap-sass-loader ci voleva del tempo, ma non mi è mai piaciuto. È molto meglio compilarlo direttamente e utilizzare un file js per sovrascrivere le variabili di boostrap o aggiungerne di nuove con jsontosass-loader.

assicurarsi che jQuery è caricata correttamente

resolve  : { 
    alias   : {  
     // bind to modules; 
     modules  : path.join(__dirname, "node_modules") 
    } 
    }, 
    plugins  : [ 
    new webpack.ProvidePlugin({ 
     "$"     : "jquery", 
     "jQuery"    : "jquery", 
     "window.jQuery"  : "jquery" 
    }), 

aggiungere nelle webpack.config.js

var sassGlobals = require('[YourVars.json file]'); 
var sassVars = JSON.stringify(sassGlobals); 

aggiungere ai caricatori

{ test: /\.scss$/, loaders: ["style", "css", "sass","jsontosass?" + sassVars]}, 
    { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" }, 
    { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" }, 
    { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" }, 
    { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" }, 
    { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }, 

nel vostro app.scss voi fare le seguenti importazioni

@import "~bootstrap-sass/assets/stylesheets/_bootstrap-sprockets.scss"; 
@import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss"; 

e infine nel proprio app.js si aggiunge quanto segue (i moduli sono con alias su node_modules).

/** 
* initializes bootstrap 
*/ 
require("modules/bootstrap-sass/assets/javascripts/bootstrap.js"); 
require("./app.scss"); 

Answer 2

Non è semplice, ma può funzionare senza dover fare json.

Avviare importando boostrap-Sass (installato tramite NPM) nelle main.js/ts

require("bootstrap-sass"); 

Oppure, se si sta utilizzando ts/ES6:

import "bootstrap-sass"; 

Poi basta importare queste due in stili del componente (in linea o Sass esterna/file di SCSS in angolare 2):

@import "~bootstrap-sass/assets/stylesheets/bootstrap-sprockets" 
@import "../styles/bootstrap/bootstrap" 

È quindi necessario disporre di una cartella ../styles/bootstrap con il seguente contenuto:

• variables.scss: Basta copiare e personalizzare da node_modules/bootstrap-sass/assets/fogli di stile/bootstrap/_variables.scss
• bootstrap.scss: Questo è una versione "webpack-ified" del file di bootstrap principale:

//

@import "variables"; //this is the key to easy customisation 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/mixins"; 
    @import "~bootstrap-sass/assets/stylesheets/~bootstrap-sass/assets/stylesheets/bootstrap/normalize"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/print"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/glyphicons"; 

    // Core CSS 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/scaffolding"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/type"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/code"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/grid"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/tables"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/forms"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/buttons"; 

    // Components 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/component-animations"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/dropdowns"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/button-groups"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/input-groups"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/navs"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/navbar"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/breadcrumbs"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/pagination"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/pager"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/labels"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/badges"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/jumbotron"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/thumbnails"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/alerts"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/progress-bars"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/media"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/list-group"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/panels"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/wells"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/close"; 

    // Components w/ JavaScript 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/modals"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/tooltip"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/popovers"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/carousel"; 

    // Utility classes 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/utilities"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities"; 

Infine, il bit webpack config.Questo potrebbe essere il caricatore:

{ 
     test: /\.(sass|scss)$/, 
     loader: "file?name=[path][name].css!sass-loader" 
    } 

E questo un modo per caricare jQuery:

new webpack.ProvidePlugin({ 
    $: "jquery", 
    jQuery: "jquery" 
})