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

- Matt

Answer 1

是的!!! Webpack将所有东西都视为模块，包括您存储库中那个可爱的小package.json。

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

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

- Sean Larkin

Answer 2

目前 webpack 不包含此功能。在 webpack 的 CSS 加载器存储库中有一个 打开问题。

关于使用 style 字段，还有一个 SO 线程，似乎有一些支持此功能的 npm / browserify 工具。

- Ori Drori