6

私はブランチを初めて使用しますが、sass-branch と bootstrap-4.0.0-alpha.2 を npm でインストールされたモジュールとして設定しようとすると、bootstrap.scss を含めることができません。私が間違っていることについてのアイデアはありますか？

ここに小さなサンプル プロジェクトがあります。

私の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:generatevendor.cssvendor.css.map/*# sourceMappingURL=vendor.css.map*/{"version":3,"sources":[],"names":[],"mappings":"","file":"public/vendor.css"}

私が試したことはうまくいきませんでした：

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

  • paths.watched: ['app', 'test', 'vendor', 'node_modules/bootstrap/scss']brunch-config.js に設定を追加- そのディレクトリ内のすべてのファイルを見つけて監視しているように見えますが、sass-brunch がクラックできる場所にブランチ パイプラインを介して 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
4

1 に答える 1

14

npm.stylesからコンパイル済みの CSS を追加する場合にのみ使用してくださいnode_modules。この場合、ブートストラップをカスタマイズしたくない場合は、次を使用できます

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

または、その sass バージョンを (カスタマイズなどのために) 使用するには、次のようにする必要があります。

  1. plugins.sass.options.includePaths = ['node_modules/bootstrap/scss']、あなたが試したように。これは単にsassのロードパスにブートストラップを追加するだけです
  2. 実際@import 'bootstrap'にあなたのSASSファイルにあります。それ以外の場合、SASSはそれを含める必要があるかどうか、およびどこに含めるかをどのように知るでしょうか?

この場合、出力として 1 つの大きな css ファイル (app.css) が作成されることに注意してください。

于 2016-03-30T07:35:44.383 に答える