1

I'm building a draftjs editor module using react, es6 and webpack. It works fine, but when I run build I get all my JS files compiled by Babel, OK, however my CSS aren't. This is how I import CSS inside my module:

import '../styles.css';

Here is my webpack.config:

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  output: {
    path: path.join(__dirname, 'lib'),
    filename: 'drafty.js',
    libraryTarget: 'commonjs2',
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=drafty[local]__[hash:base64:5]!postcss-loader'),
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin('drafty.css', { allChunks: true })
  ]
};

A glitch of my CSS:

@import url(../node_modules/draft-js-linkify-plugin/lib/plugin.css);
@import url(../node_modules/draft-js-emoji-plugin/lib/plugin.css);
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
}

i {
    font-family: 'Material Icons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
} //... and more stuff

And here is my dependencies (see that I have already installed style-loader, css-loader and postcss-loader)

  "dependencies": {
    "draft-js": "^0.9.1",
    "draft-js-emoji-plugin": "^2.0.0-beta9",
    "draft-js-export-html": "^0.5.2",
    "draft-js-linkify-plugin": "^2.0.0-beta9",
    "draft-js-plugins-editor": "^2.0.0-beta9",
    "draftjs-utils": "^0.3.2",
    "extract-text-webpack-plugin": "^1.0.1",
  },
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-core": "^6.20.0",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.2.9",
    "babel-preset-stage-0": "^6.16.0",
    "classnames": "^2.2.5",
    "style-loader": "^0.13.1",
    "css-loader": "^0.26.1",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-plugin-transform-class-properties": "^6.19.0",
    "babel-polyfill": "^6.20.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "eslint": "^3.12.1",
    "eslint-config-airbnb": "^13.0.0",
    "eslint-loader": "^1.6.1",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "2.2.3",
    "eslint-plugin-react": "^6.8.0",
    "rimraf": "^2.5.4",
    "postcss-loader": "^1.2.1",
    "webpack": "^1.14.0"
  },
  "peerDependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1"
  }

My build command:

WEBPACK_CONFIG=$(pwd)/webpack.config.js BABEL_DISABLE_CACHE=1 BABEL_ENV=production NODE_ENV=production ./node_modules/.bin/babel --out-dir='lib' src && clear

Thank you.

1 Answer 1

1

I guess the problem is the css-modules that you've added to your css-loader.

Try the following,

loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader'),
      },
    ],

If you really want to use css-modules, do the following

import styles from '../style.css'

...
...
return <div classname={styles.myClass}>Hello</div>

Read more about css-modules here

Hope this helps!

Sign up to request clarification or add additional context in comments.

1 Comment

Thank you. Works like a charm. :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.