npm - Webpack/ES6 : how to import stylesheets

Question

我看到像 bootstrap 这样的存储库开始在它们的 package.json file such as 'style' and 'less.' 中包含额外的标签。如何使用这些标签导入 Assets ？

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 模块中导入样式表的标准方法？

Answer 1

是的!!! Webpack 将一切都视为一个模块，包括那个可爱的小 package.json在你的 repo 中。

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

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