Css not loading with webpack

[rachit1994]

I am trying to use emojione but the css is not loading with my code (no errors), even i am not able to set style attribute to : component code: `import React from 'react'; import TextField from 'material-ui/TextField'; import {white} from 'material-ui/styles/colors'; import EmojiPicker from 'emojione-picker'; import Mood from 'material-ui/svg-icons/editor/insert-emoticon'; import Add from 'material-ui/svg-icons/content/add'; import Voice from 'material-ui/svg-icons/hardware/keyboard-voice'; import {blue200, blue700, darkBlack, lightBlack} from 'material-ui/styles/colors';

const style = { position: 'fixed', bottom: 0, zIndex: 9999999, background: white, width: '100%', padding: '5px 0 0px 0px' } const settings = { imageType: 'png', sprites: true }; const emojiStyle = { width: '100%' }; const options = { verticalAlign:'bottom', padding:'10px 5px', cursor: 'pointer', color: lightBlack }; const TextFieldExampleSimple = () => (

);

export default TextFieldExampleSimple;`

Webpack code:

`require('es6-promise').polyfill(); webpack = require('webpack'); module.exports = { context: __dirname, // plugins: [ // new webpack.optimize.AggressiveMergingPlugin(), // new webpack.optimize.UglifyJsPlugin({ // compress: { warnings: false }, // comments: false, // minimize: false // }), // new webpack.DefinePlugin({ // 'process.env': { // 'NODE_ENV': JSON.stringify('production') // } // }) // ], entry: { jsx: "./src/index.jsx", html: "./src/index.html", },

output: {
    path: __dirname + "/static",
    filename: "bundle.js",
},
module: {
    preLoaders: [
        //Eslint loader
        // { test: /\.jsx?$/, exclude: /node_modules/, loader: "eslint-loader"},
    ],
    loaders: [
        { test: /\.html$/, loader: "file?name=[name].[ext]" },
        // { test: /\.css$/, loader: "file?name=[name].[ext]" },
        { test: /\.jsx?$/, exclude: /node_modules/, loaders: ["react-hot", "babel-loader"] },
        { test: /\.css$/, loader: "style-loader!css-loader" },
        { test: /\.json$/, loader: "json-loader" }
    ],
},
resolve: {
    extensions: ['', '.js', '.jsx']
},
eslint: {
    configFile: './.eslintrc'
}

}; `

Note: the component is inside an iframe

[tommoor]

I'm sure you found the solution - but for others that stumble upon this, you need to import the css into your component as noted in the README: https://github.com/tommoor/emojione-picker#usage

something like:

import "emojione-picker/css/picker.css"