React essence stylesheet is 14mb with webpack - css

Question

I just recognized that my stylesheet is 14mb when I am using the react essence library for the UI part. Webpack is also using forever to bundle in the beginning.
I just tested this with a simple react app where I import just the essence button. The stylesheet appears to be 7mb. It looks like webpack is importing everything instead of parts.
My webpack config file is simple:
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'eval',
entry: [
'webpack-hot-middleware/client',
'./src/index.jsx'
],
output: {
path: path.join(__dirname, 'static'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new ExtractTextPlugin('styles.css', { allChunks: true }),
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('devolopment')
}
})
],
module: {
loaders: [
{
test: /\.(jsx|js)/,
loaders: ['react-hot', 'babel'],
resolve: ['.js', '.jsx'],
exclude: /node_modules/,
include: path.join(__dirname, 'src')
},
{
test: /(\.css|.less)$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader'),
resolve:['.less', '.css']
},
{
test: /\.(otf|eot|svg|ttf|woff)/,
loader: 'url-loader'
}
]
},
resolve: {
extensions: ['', '.js', '.json', '.less', '.jsx']
}
};
What is the problem and how do I solve this?
Edit:
The webpack output when importing button from react-essence: Link
The webpack out when importing button from essence-button: Link

Answer 1

Depending on your Essence component import there are 2 options:
import { Btn } from react-essence will import all Essence css.
import Btn from essence-btn will import only the Essence Btn css & Essence core.
Will help me to solve this issue if you can share your code snippet so I can test/debug it.