Không thể có được bootstrap-sass để làm việc với webpack

Question

Im sau instrtuctions trên the bootstrap-sass-loader page

trong package.json của tôi, tôi đã

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

đây là webpack.config.js tôi

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: [] 
    } 
}; 

theo như tôi hiểu tôi chỉ cần sử dụng

require("bootstrap-sass-loader"); 

trong số app.js và hoàn tất. nhưng tôi không thể sử dụng bất kỳ kiểu bootstrap nào. tôi đang thiếu gì ở đây?

Answer 1

Mất nhiều thời gian để khởi động bộ nạp khởi động nhưng tôi chưa bao giờ thích nó. Bạn sẽ tốt hơn khi biên dịch trực tiếp và sử dụng tệp js để ghi đè các biến tăng cường hoặc thêm các biến mới với jsontosass-loader.

chắc chắn rằng jquery được nạp đúng

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

thêm trong webpack.config.js

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

thêm vào bộ tải

{ 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" }, 

trong app.scss của bạn, bạn nhập các mục sau đây

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

và cuối cùng trong app.js của bạn, bạn thêm thông tin sau (mô đun được đặt bí danh thành node_modules).

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

Answer 2

Nó không đơn giản nhưng có thể hoạt động mà không cần phải làm json.

Bắt đầu bằng cách nhập boostrap-sass (cài đặt qua NPM) trong main.js/bạn ts

require("bootstrap-sass"); 

Hoặc nếu bạn đang sử dụng ts/ES6:

import "bootstrap-sass"; 

Sau đó chỉ cần nhập các hai trong phong cách của thành phần (inline hoặc sass bên ngoài/file SCSS ở góc 2):

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

sau đó bạn cần phải có một thư mục ../styles/bootstrap với các nội dung sau:

• variables.scss: Chỉ cần sao chép và tùy chỉnh từ node_modules/bootstrap-sass/tài sản/stylesheets/bootstrap/_variables.scss
• bootstrap.scss: Đây là một phiên bản "webpack-ified" của file bootstrap chính:

//

@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"; 

Cuối cùng, các bit webpack config.Đây có thể là bộ nạp:

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

Và đây là một cách để tải jquery:

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