Làm thế nào để có được bữa nửa buổi và bữa nửa buổi để biên dịch/bao gồm bootstrap.scss?

Question

Tôi mới dùng bữa nửa buổi, nhưng cố gắng cài đặt nó với sass-brunch và bootstrap-4.0.0-alpha.2 làm mô-đun được cài đặt npm, tôi không thể lấy nó để bao gồm bootstrap.scss. Bất kỳ ý tưởng về những gì tôi đang làm sai?

Đây là small example project.

package.json của tôi:

{ 
    "name": "simple-brunch", 
    "version": "0.1.0", 
    "private": true, 
    "devDependencies": { 
    "bootstrap": "^4.0.0-alpha.2", 
    "brunch": "^2.5.3", 
    "javascript-brunch": "^2.0.0", 
    "sass-brunch": "^2.0.0" 
    } 
} 

My bưa ăn-config.js:

module.exports = { 
    config: { 
    files: { 
     javascripts: { 
     joinTo: { 
      'vendor.js': /^(?!app)/, 
      'app.js': /^app/ 
     } 
     }, 
     stylesheets: { 
     joinTo: { 
      'vendor.css': /^(?!app)/, 
      'app.css': /^app/ 
     } 
     } 
    }, 

    npm: { 
     styles: { 
     bootstrap: ['scss/bootstrap.scss'] 
     } 
    } 
    } 
} 

Kết quả từ brunch build -d dưới. sass-brunch được sử dụng thành công để xử lý app/styles/main.scss - có dòng brunch:pipeline hiển thị nó. Tuy nhiên, mặc dù một vài dòng gần phía trên dường như chỉ ra rằng nó được tìm thấy và biên dịch bootstrap's bootstrap.scss, và một dòng brunch:generate gần phía dưới xuất hiện để cho thấy rằng nó được ghép nó vào vendor.css, tệp đó trống trừ nhận xét trỏ tại vendor.css.map (/*# sourceMappingURL=vendor.css.map*/) và bản đồ đó chỉ chứa {"version":3,"sources":[],"names":[],"mappings":"","file":"public/vendor.css"}.

Những điều tôi đã cố gắng mà không làm việc:

• Thêm một khung cảnh plugins.sass.options.includePaths: ['node_modules/bootstrap/scss'] để Brunch-config.js; không có thay đổi trong đầu ra.

• Thêm một khung cảnh paths.watched: ['app', 'test', 'vendor', 'node_modules/bootstrap/scss'] để bưa ăn-config.js - bây giờ có vẻ như để tìm & xem tất cả các file trong thư mục đó, nhưng vẫn không gửi bootstrap.scss thông qua các đường ống dẫn trưa đến nơi sass-bưa ăn có thể có một vết nứt ở đó.

Đây kết quả:

brunch:config Trying to load brunch-config +0ms 
brunch:plugins Loaded plugins: javascript-brunch, sass-brunch +66ms 
brunch:watch add package.json +16ms 
brunch:watch add brunch-config.js +0ms 
brunch:watch add /Users/stearns/brunch-starter/node_modules/bootstrap/scss/bootstrap.scss +1ms 
brunch:list Reading node_modules/bootstrap/scss/bootstrap.scss +0ms 
brunch:file Init node_modules/bootstrap/scss/bootstrap.scss: isntModule=true isWrapped=false +3ms 
brunch:list Compiled node_modules/bootstrap/scss/bootstrap.scss +6ms 
brunch:watch add app/application.js +1ms 
brunch:list Reading app/application.js +0ms 
brunch:file Init app/application.js: isntModule=false isWrapped=true +1ms 
brunch:pipeline Compiling app/application.js @ JavaScriptCompiler +1ms 
brunch:watch add app/assets/index.html +17ms 
brunch:asset Init app/assets/index.html directory=app/assets/ relativePath=index.html destinationPath=public/index.html +1ms 
brunch:watch add app/styles/main.scss +1ms 
brunch:list Reading app/styles/main.scss +0ms 
brunch:asset Copied app/assets/index.html +7ms 
brunch:file Init app/styles/main.scss: isntModule=false isWrapped=false +1ms 
brunch:pipeline Compiling app/styles/main.scss @ SassCompiler +0ms 
brunch:pipeline Dependencies app/styles/main.scss @ SassCompiler +4ms 
brunch:list Compiled app/styles/main.scss +0ms 
brunch:list Reading node_modules/bootstrap/dist/js/npm.js +6ms 
brunch:modules Wrapping application.js @ commonjs +0ms 
brunch:list Compiled app/application.js +1ms 
brunch:file Init node_modules/bootstrap/dist/js/npm.js: isntModule=true isWrapped=true +0ms 
brunch:list Reading node_modules/bootstrap/dist/js/umd/util.js +33ms 
brunch:list Reading node_modules/bootstrap/dist/js/umd/alert.js +0ms 
brunch:list Reading node_modules/bootstrap/dist/js/umd/button.js +0ms 
brunch:list Reading node_modules/bootstrap/dist/js/umd/carousel.js +0ms 
brunch:list Reading node_modules/bootstrap/dist/js/umd/collapse.js +0ms 
brunch:list Reading node_modules/bootstrap/dist/js/umd/dropdown.js +0ms 
brunch:list Reading node_modules/bootstrap/dist/js/umd/modal.js +0ms 
brunch:list Reading node_modules/bootstrap/dist/js/umd/scrollspy.js +0ms 
brunch:list Reading node_modules/bootstrap/dist/js/umd/tab.js +1ms 
brunch:list Reading node_modules/bootstrap/dist/js/umd/tooltip.js +0ms 
brunch:list Reading node_modules/bootstrap/dist/js/umd/popover.js +0ms 
brunch:modules Not wrapping (is vendor file) node_modules/bootstrap/dist/js/npm.js +0ms 
brunch:list Compiled node_modules/bootstrap/dist/js/npm.js +0ms 
brunch:file Init node_modules/bootstrap/dist/js/umd/util.js: isntModule=true isWrapped=true +1ms 
brunch:file Init node_modules/bootstrap/dist/js/umd/alert.js: isntModule=true isWrapped=true +0ms 
brunch:file Init node_modules/bootstrap/dist/js/umd/button.js: isntModule=true isWrapped=true +0ms 
brunch:file Init node_modules/bootstrap/dist/js/umd/carousel.js: isntModule=true isWrapped=true +1ms 
brunch:file Init node_modules/bootstrap/dist/js/umd/collapse.js: isntModule=true isWrapped=true +0ms 
brunch:file Init node_modules/bootstrap/dist/js/umd/dropdown.js: isntModule=true isWrapped=true +0ms 
brunch:file Init node_modules/bootstrap/dist/js/umd/modal.js: isntModule=true isWrapped=true +0ms 
brunch:file Init node_modules/bootstrap/dist/js/umd/scrollspy.js: isntModule=true isWrapped=true +1ms 
brunch:file Init node_modules/bootstrap/dist/js/umd/tab.js: isntModule=true isWrapped=true +0ms 
brunch:file Init node_modules/bootstrap/dist/js/umd/tooltip.js: isntModule=true isWrapped=true +0ms 
brunch:file Init node_modules/bootstrap/dist/js/umd/popover.js: isntModule=true isWrapped=true +1ms 
brunch:modules Not wrapping (is vendor file) node_modules/bootstrap/dist/js/umd/util.js +18ms 
brunch:list Compiled node_modules/bootstrap/dist/js/umd/util.js +2ms 
brunch:modules Not wrapping (is vendor file) node_modules/bootstrap/dist/js/umd/button.js +18ms 
brunch:list Compiled node_modules/bootstrap/dist/js/umd/button.js +0ms 
brunch:modules Not wrapping (is vendor file) node_modules/bootstrap/dist/js/umd/alert.js +54ms 
brunch:list Compiled node_modules/bootstrap/dist/js/umd/alert.js +1ms 
brunch:modules Not wrapping (is vendor file) node_modules/bootstrap/dist/js/umd/carousel.js +2ms 
brunch:list Compiled node_modules/bootstrap/dist/js/umd/carousel.js +1ms 
brunch:modules Not wrapping (is vendor file) node_modules/bootstrap/dist/js/umd/collapse.js +2ms 
brunch:list Compiled node_modules/bootstrap/dist/js/umd/collapse.js +0ms 
brunch:modules Not wrapping (is vendor file) node_modules/bootstrap/dist/js/umd/dropdown.js +2ms 
brunch:list Compiled node_modules/bootstrap/dist/js/umd/dropdown.js +0ms 
brunch:modules Not wrapping (is vendor file) node_modules/bootstrap/dist/js/umd/modal.js +2ms 
brunch:list Compiled node_modules/bootstrap/dist/js/umd/modal.js +1ms 
brunch:modules Not wrapping (is vendor file) node_modules/bootstrap/dist/js/umd/scrollspy.js +2ms 
brunch:list Compiled node_modules/bootstrap/dist/js/umd/scrollspy.js +4ms 
brunch:modules Not wrapping (is vendor file) node_modules/bootstrap/dist/js/umd/tab.js +2ms 
brunch:list Compiled node_modules/bootstrap/dist/js/umd/tab.js +1ms 
brunch:modules Not wrapping (is vendor file) node_modules/bootstrap/dist/js/umd/tooltip.js +1ms 
brunch:list Compiled node_modules/bootstrap/dist/js/umd/tooltip.js +1ms 
brunch:modules Not wrapping (is vendor file) node_modules/bootstrap/dist/js/umd/popover.js +1ms 
brunch:list Compiled node_modules/bootstrap/dist/js/umd/popover.js +1ms 
brunch:write Writing 4/4 files +69ms 
brunch:generate Concatenating [node_modules/bootstrap/scss/bootstrap.scss] => public/vendor.css +2ms 
brunch:generate Concatenating [app/application.js] => public/app.js +2ms 
brunch:generate Concatenating [app/styles/main.scss] => public/app.css +2ms 
brunch:generate Concatenating [node_modules/bootstrap/dist/js/npm.js, node_modules/bootstrap/dist/js/umd/alert.js, node_modules/bootstrap/dist/js/umd/button.js, node_modules/bootstrap/dist/js/umd/carousel.js, node_modules/bootstrap/dist/js/umd/collapse.js, node_modules/bootstrap/dist/js/umd/dropdown.js, node_modules/bootstrap/dist/js/umd/modal.js, node_modules/bootstrap/dist/js/umd/popover.js, node_modules/bootstrap/dist/js/umd/scrollspy.js, node_modules/bootstrap/dist/js/umd/tab.js, node_modules/bootstrap/dist/js/umd/tooltip.js, node_modules/bootstrap/dist/js/umd/util.js] => public/vendor.js +3ms 
brunch:common Writing public/vendor.css +33ms 
brunch:common Writing public/app.js +0ms 
brunch:common Writing public/app.css +0ms 
brunch:common Writing public/vendor.js +1ms 
brunch:common Writing public/app.css.map +4ms 
brunch:common Writing public/app.js.map +1ms 
brunch:common Writing public/vendor.css.map +0ms 
brunch:common Writing public/vendor.js.map +8ms 
27 Mar 03:52:23 - info: compiled 15 files into 4 files, copied index.html in 776ms 

Answer 1

npm.styles chỉ nên được sử dụng để thêm CSS biên soạn từ node_modules. Trong trường hợp này, nếu bạn không muốn tùy chỉnh bootstrap, bạn có thể sử dụng

npm: { 
    styles: { 
    bootstrap: ['dist/css/bootstrap.css'] 
    } 
} 

Hoặc, để sử dụng phiên bản sass của nó (để tùy chỉnh nó và vân vân), bạn sẽ cần phải:

1. plugins.sass.options.includePaths = ['node_modules/bootstrap/scss'], như bạn đã thử. Chỉ đơn giản là thêm bootstrap để sass 'đường dẫn tải
2. thực sự @import 'bootstrap' trong tệp SASS của bạn. Nếu không, làm thế nào SASS sẽ biết nếu nó nên bao gồm một hay không, và nơi để bao gồm?

Lưu ý rằng trong trường hợp này bạn sẽ có một file css lớn như đầu ra (app.css)