Webpack / ES6: how to import stylesheets

问题

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"
}

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";

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?

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

回答1:

Yes!!! Webpack treats everything as a module, including that cute little package.json in your repo.

Therefore, you simply need to require() it into your app and then access properties from that json object. (See json-loader for more info).

I often use this to import data like version number etc for my Webpack config file for bundling and versioning.

回答2:

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

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.

来源：https://stackoverflow.com/questions/36507147/webpack-es6-how-to-import-stylesheets