如何获得早午餐和sass-brunch来编译/包含bootstrap.scss？

我刚开始吃早午餐,但是在尝试用sass-brunch和bootstrap-4.0.0-alpha.2作为npm安装的模块进行设置时,我无法让它包含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"
  }
}

我的brunch-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 – 有一个早午餐：显示它的管道线.然而,虽然顶部附近的几行似乎表明它已找到并编译了bootstrap的bootstrap.scss,并且有一个早午餐：底部附近的生成线似乎表明它与vendor.css连接,该文件为空,除了注释指向vendor.css.map(/ *#sourceMappingURL = vendor.css.map * /),该地图仅包含{“version”：3,“sources”：[],“names”：[], “映射”： “”, “文件”： “公/ 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 – 它现在似乎找到&观察该目录中的所有文件,但仍然没有通过早午餐管道发送bootstrap.scss到sass-brunch可能有一个裂缝.

这是输出：

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

npm.styles只应用于从node_modules添加已编译的CSS.在这种情况下,如果您不想自定义引导程序,则可以使用

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

或者,要使用其sass版本(以自定义它等),您需要：

> plugins.sass.options.includePaths = [‘node_modules / bootstrap / scss’],正如您所尝试的那样.这只是添加bootstrap到sass的加载路径
>实际上你的SASS文件中有@import’bootstrap’.否则,SASS将如何知道它是否应该包括那个,以及在哪里包括？

请注意,在这种情况下,您将有一个大的css文件作为输出(app.css)