我刚开始吃早午餐,但是在尝试用sass-brunch和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"
}
}
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将如何知道它是否应该包括那个,以及在哪里包括？
