Webpack / ES6：如何导入样式表答案

【问题标题】：Webpack / ES6: how to import stylesheetsWebpack / ES6：如何导入样式表
【发布时间】：2016-07-30 03:54:18
【问题描述】：

我看到像 bootstrap 这样的存储库开始在其package.json file such as 'style' and 'less.' 中包含其他标签我如何使用这些标签来导入资产？

package.json

{
  "name": "bootstrap",
  "style": "dist/css/bootstrap.css",
  "sass": "scss/bootstrap.scss",
  "main": "./dist/js/npm"
}

我正在使用 ES6 模块和 webpack。我希望能够使用 package.json 中的样式标签导入我的样式表。

目前我正在做这样的事情：

my_stylesheets.less

@import "~bootstrap/dist/css/bootstrap";

当 package.json 中可用时，添加路径对于消费者来说很烦人。有没有办法可以使用 package.json 中的标签导入样式表？

如果我不能使用 package.json 中的标签，是否有在 ES6 模块中导入样式表的标准方法？

【问题讨论】：

【解决方案1】：

是的！！！ Webpack 将所有内容都视为一个模块，包括你的 repo 中那个可爱的小 package.json。

因此，您只需将require() 输入您的应用程序，然后从该 json 对象访问属性。（有关更多信息，请参阅 json-loader）。

我经常使用它为我的 Webpack 配置文件导入版本号等数据以进行捆绑和版本控制。

【讨论】：

【解决方案2】：

此功能暂时不包含在 webpack 中。在 webpack 的 CSS 加载器 repo 中有一个 open issue 关于这个。

还有一个SO thread关于style字段的使用，好像有一些npm/browserify工具支持这个。

【讨论】：