2016-03-27 7 views
5

私はブランチを始めたばかりですが、sass-brunchとbootstrap-4.0.0-alpha.2をnpmがインストールされたモジュールとしてセットアップしようとすると、bootstrap.scssを含むことができません。私が間違っていることに関するアイデアは?brunch&sass-brunchをコンパイルするには/ bootstrap.scssをインクルードするには?

ここにはsmall example projectがあります。

マイpackage.json:

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

マイブランチ-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'] 
     } 
    } 
    } 
} 

brunch build -dからの出力は以下の通りです。 sass-brunchは、app/styles/main.scssを処理するのに成功しています - それを示すbrunch:pipeline行があります。しかし、上のほんの数行は見つかってコンパイルされたブートストラップのbootstrap.scssを示しており、一番下にあるbrunch:generate行はvendor.cssに連結されていることが示され、vendor.css.mapを指すコメントを除いてそのファイルは空です/*# sourceMappingURL=vendor.css.map*/)、そのマップには{"version":3,"sources":[],"names":[],"mappings":"","file":"public/vendor.css"}しか含まれていません。動作しませんでした私が試した

もの:

  • -config.jsのをブランチするplugins.sass.options.includePaths: ['node_modules/bootstrap/scss']設定を追加します。出力の変化はありません。

  • -config.jsのをブランチする設定paths.watched: ['app', 'test', 'vendor', 'node_modules/bootstrap/scss']を追加する - 今&は、そのディレクトリ内のすべてのファイルを見て見つけているようだが、それでもどこSASS-ブランチ缶にブランチパイプラインを通じてbootstrap.scssを送信していませんそれに亀裂があります。ここで

は出力です:

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

参照:https://github.com/bassjobsen/brunch-bootstrap4とあなた、私の問題を開始それについての質問はありません –

+0

Thanks、@bass - これは私のアプリのソースコードにbootstrap4を組み込むスケルトンです。ブートストラップを別の依存関係として維持して、後でアップグレードしやすくする方が好きです。 –

答えて

12

npm.stylesnode_modulesからコンパイルCSSを追加するために使用する必要があります。

    :この場合は、ブートストラップをカスタマイズしたくなかった場合、あなたは

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

    あるいは、そのSASSのバージョンを使用するを使用することができます(それをカスタマイズして、その上に)、あなたはする必要があります試みたとおりに

  1. plugins.sass.options.includePaths = ['node_modules/bootstrap/scss']これは単純にで、ブートストラップを「ロードパス
  2. 実際には@import 'bootstrap'のSASSファイルに追加します。さもなければ、SASSはそれを含めるべきかどうか、そしてどこに含めるべきかをSASSがどのように知っていますか?

この場合には、あなたが出力として一つの大きなcssファイルを持っていることに注意してください(app.css)

+0

この回答は私にとっては役に立ちません:( –

+0

最初のオプションは、 'css-brunch'がインストールされていることを確認してください。npmオプションのスタイルが引き込まれていない同様の問題が発生しました。 – patkoperwas

+1

あなたが_package name_またはCSS_への_pathで逃した場合、あなたは**警告を受け取りません**少なくとも私は貴重な時間を要します。 –

関連する問題