Webpack/ES6:如何导入样式表

Question

我看到像bootstrap这样的存储库开始在他们的package.json文件中包含其他标签,例如'style'和'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 配置文件导入版本号等数据，以进行捆绑和版本控制。