如何让 brunch 和 sass-brunch 编译/包含 bootstrap.scss?

Posted

技术标签:

【中文标题】如何让 brunch 和 sass-brunch 编译/包含 bootstrap.scss?【英文标题】:How to get brunch & sass-brunch to compile/include bootstrap.scss? 【发布时间】:2016-07-14 14:40:01 【问题描述】:

我是 brunch 的新手,但在尝试使用 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"
  

我的早午餐-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"

我尝试过的方法不起作用:

plugins.sass.options.includePaths: ['node_modules/bootstrap/scss'] 设置添加到 brunch-config.js;输出没有变化。

paths.watched: ['app', 'test', 'vendor', 'node_modules/bootstrap/scss'] 设置添加到 brunch-config.js - 现在似乎可以查找并查看该目录中的所有文件,但仍然没有通过 brunch 管道将 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

【问题讨论】:

请参阅:github.com/bassjobsen/brunch-bootstrap4 并在您有任何疑问时提出问题 谢谢,@bass——这是一个可以将 bootstrap4 构建到我的应用程序源代码中的框架;我更喜欢将 Bootstrap 维护为一个单独的依赖项,以便以后更容易升级。 【参考方案1】:

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

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

或者,要使用它的 sass 版本(自定义等),您需要:

    plugins.sass.options.includePaths = ['node_modules/bootstrap/scss'],正如你所尝试的那样。这只是添加引导到 sass 的 加载路径 实际上是 @import 'bootstrap' 在您的 SASS 文件中。否则,SASS 怎么知道它是否应该包含那个,以及在哪里包含?

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

【讨论】:

对于第一个选项,请确保您已安装 css-brunch - 遇到了类似的问题,即未引入 npm 选项中的样式。 只是想提一下,如果你错过了 package namepath to CSS不会收到任何警告。至少我不是,这花了我一些宝贵的时间。

以上是关于如何让 brunch 和 sass-brunch 编译/包含 bootstrap.scss?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Brunch 编写多文件 NPM 包

在 Brunch.io 中,我们如何运行测试

早午餐如何禁用 RequireJS 模块包装

将现有 JavaScript 项目导入 Grunt/Brunch 项目

使用 Brunch 控制脚本连接的顺序

当GirlUp遇上BlockChain大神|GirlUp西雅图Brunch