CODEWITHSUNDEEP
reactjswebpackbabeljs
MattGA
MattGA

Reputation: 135

CSS aren't compiled in Webpack when I build my module

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.

Upvotes: 1

Views: 675

Answers (1)

Pranesh Ravi
Pranesh Ravi

Reputation: 19133

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!

Upvotes: 1

Related Questions