how styles should be configured?

[hyzhak]

How webpack should be configured In a lib project which has not only js, but also style files (sass, less, css). When they should be deployed separately (build/main.min.js and build/main.min.css)?

And at the same time, js should not be hard bound to css. Because it is very easy to import css inside of js, but it won't work when you would like to give user possibility to choose whether they want your css or not.

There are few options (which don't work)

import css inside of js

// in main.js
import './style.sass';

but when a user would use this lib she would be forced to use styles.

refer css as an entry:

entry: {
  main: 'path/to/the/main.js',
  style: 'path/to/the/style.sass',
}

will create style.js which is not what could be expected.

use extract-text-webpack-plugin

https://github.com/webpack-contrib/extract-text-webpack-plugin
It still creates style.js but with desired style.css

[pardoman]

Would be great adding examples for this, too.