Webpack/ES6:如何导入样式表 [英] Webpack / ES6: how to import stylesheets

问题描述

我看到引导程序之类的存储库开始在其 package.json文件，例如"style"和"less".如何使用这些标签导入资产?

I see repositories like bootstrap starting to include additional tags in their package.json file such as 'style' and 'less.' How can I use these tags to import assets?

package.json

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

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

I am using ES6 modules and webpack. I want to do be able to import my stylesheets using the style tag in package.json.

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

Currently I am doing something like this:

my_stylesheets.less

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

，当package.json中有可用路径时，对于消费者来说，添加路径很烦人.有没有一种方法可以使用package.json中的标记导入样式表?

which is annoying for consumers to add the path when it is available in package.json. Is there a way I can import stylesheets using the tag in package.json?

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

If I cannot use the tag in package.json, is there a standard way of importing stylesheets in ES6 modules?

推荐答案

此功能目前尚未包含在webpack中.在Webpack的CSS加载程序存储库中，有一个未解决的问题.

This feature is not included in webpack for now. There is an open issue about this in webpack's CSS loader repo.

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

There is also an SO thread on the use of the style field, and it seems that there are some npm / browserify tools that support this.

这篇关于Webpack/ES6:如何导入样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！