Webpack / ES6：如何导入样式表

Question

我看到像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中的style标签导入我的样式表。

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

my_stylesheets.less

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

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

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

Answer 1

是!!! Webpack将所有内容视为一个模块，包括您回购中的可爱小package.json。

因此，您只需将require()添加到您的应用中，然后从该json对象访问属性。 （有关详细信息，请参阅json-loader）。

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

Answer 2

此功能暂时不包含在webpack中。在webpack的CSS加载器仓库中有一个open issue。

使用样式字段时还有一个SO thread，似乎有一些npm / browserify工具可以支持这一点。