如何通过 bootstrap-loader 配置 webpack 2.2.0 rc3 (rc4) 和 bootstrap alpha 6

Posted

技术标签:

【中文标题】如何通过 bootstrap-loader 配置 webpack 2.2.0 rc3 (rc4) 和 bootstrap alpha 6【英文标题】:How can I configure webpack 2.2.0 rc3 (rc4) and bootstrap alpha 6 via bootstrap-loader 【发布时间】:2017-05-26 17:46:47 【问题描述】:

如何使用 bootstap 4 显示正确的 webpack 2 rc3 配置?

这是我的.bootstraprc

这是我的webpack.config.js

毕竟我在 npm start 上得到了这个错误:

错误 ./~/extract-text-webpack-plugin/loader.js?"omit":1,"remove":true!./~/style-loader!./~/resolve-url-loader!./ ~/sass-loader?sourceMap!./~/bootstrap-loader/lib/bootstrap.styles.loader.js?"bootstrapVersion":4,"extractStyles":true,"styleLoaders":["style-loader", "css-loader","postcss-loader","sass-loader"],"styles":["mixins","normalize","print","re​​boot","type","images","code ","grid","tables","forms","buttons","transitions","dropdown","button-group","input-group","custom-forms","nav","navbar ","card","breadcrumb","pagination","jumbotron","alert","progress","media","list-group","re​​sponsive-embed","close","badge", "modal","tooltip","popover","carousel","utilities"],"scripts":false,"configFilePath":"/Users/ivan/Dev/react/.bootstraprc","bootstrapPath":" /Users/ivan/Dev/react/~/bootstrap","bootstrapRelPath":"../bootstrap"!./~/bootstrap-loader/no-op.js 模块构建失败:ModuleBuildError:模块构建失败:TypeError: 无法读取未定义 @ 的属性“路径” ./~/bootstrap-loader/lib/bootstrap.loader.js?extractStyles!./~/bootstrap-loader/no-op.js 1:21-1040 @ ./~/bootstrap-loader/extractStyles.js @ 多应用

错误 ./~/extract-text-webpack-plugin/loader.js?"omit":1,"remove":true!./~/style-loader!./~/resolve-url-loader!./ ~/sass-loader?sourceMap!./~/bootstrap-loader/lib/bootstrap.styles.loader.js?"bootstrapVersion":4,"extractStyles":true,"styleLoaders":["style-loader", "css-loader","postcss-loader","sass-loader"],"styles":["mixins","normalize","print","re​​boot","type","images","code ","grid","tables","forms","buttons","transitions","dropdown","button-group","input-group","custom-forms","nav","navbar ","card","breadcrumb","pagination","jumbotron","alert","progress","media","list-group","re​​sponsive-embed","close","badge", "modal","tooltip","popover","carousel","utilities"],"scripts":false,"configFilePath":"/Users/ivan/Dev/react/.bootstraprc","bootstrapPath":" /Users/ivan/Dev/react/~/bootstrap","bootstrapRelPath":"../bootstrap"!./~/bootstrap-loader/no-op.js 模块构建失败:ModuleBuildError:模块构建失败:TypeError: 无法读取对象未定义的属性“路径”。 (/Users/ivan/Dev/react/node_modules/async/dist/async.js:2234:31)

【问题讨论】:

【参考方案1】:

我已经解决了我的问题。 问题出在 webpack.config.js

过得怎么样:

new webpack.LoaderOptionsPlugin(
...
  options: 
    ...
    context: path.resolve(__dirname, '.'),
    ...
  ,
...
)

应该怎样

new webpack.LoaderOptionsPlugin(
...
  options: 
    ...
    context: path.resolve(__dirname, '.'),
    output: 
      path: 'dist',
    ,
    ...
  ,
...
)

【讨论】:

以上是关于如何通过 bootstrap-loader 配置 webpack 2.2.0 rc3 (rc4) 和 bootstrap alpha 6的主要内容,如果未能解决你的问题,请参考以下文章

Bootstrap - 加载(onpress)选项卡/下拉内容

如何通过配置文件在 Jetty 中配置登录?

如何通过 database.properties 文件使数据库配置可配置的 persistence.xml 文件

如何通过 Grunt 配置目录递归 Sass 编译任务

如何通过 Grunt 配置目录递归 Sass 编译任务

如何配置 Django 通过 Postfix 发送邮件? [关闭]