2016-03-27 3 views
5

Я новичок в brunch, но, пытаясь настроить его с помощью 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's 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'] к БРАНЧ-config.js; никаких изменений в выходе.

  • Добавление paths.watched: ['app', 'test', 'vendor', 'node_modules/bootstrap/scss'] установку на бранч-config.js - это теперь, кажется, найти & смотреть все файлы в этом каталоге, но до сих пор не посылает 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

Спасибо, @bass - это скелет, который будет строить bootstrap4 в исходный код моего приложения; Я предпочитаю поддерживать Bootstrap как отдельную зависимость, чтобы упростить обновление позже. –

ответ

12

npm.styles следует использовать только для добавления скомпилированный CSS из node_modules. В этом случае, если вы не хотите, чтобы настроить загрузчик, вы можете использовать

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

Или использовать его Sass версию (чтобы настроить его и так далее), вам нужно будет:

  1. plugins.sass.options.includePaths = ['node_modules/bootstrap/scss'], как вы пробовали. Это просто добавляет bootstrap to sass 'путь загрузки
  2. Фактически @import 'bootstrap' в вашем файле SASS. В противном случае, как SASS узнает, должен ли он включать этот или нет, и куда включать?

Обратите внимание, что в этом случае у вас будет один большой файл CSS в качестве выходного (app.css)

+0

Этот ответ не работает для меня :( –

+0

Для первого варианта убедитесь, что вы установили 'css-brunch' - столкнулись с аналогичной проблемой, где стили в опции npm не были втянуты. – patkoperwas

+1

Просто хотел упомянуть что если вы пропустили с _package name_ или _path до CSS_, вы ** не получите никаких предупреждений об этом **. По крайней мере, я не являюсь, что стоило мне дорогого времени. –

Смежные вопросы