Search code examples
webpackwebpack-style-loader

Webpack won't generate external css file


my webpack setup won't generate the external css file. It bundles my .js just fine however. I am using the ExtractTextPlugin and it's still not working. No errors are generated. Any help would be greatly appreciated! :-)

Here is my webpack.config.js

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

module.exports = {

    entry: './client/app/root.js',

    output: {
        path: path.resolve('./client/dist'),
        filename: 'bundle.js'
    },

    devtool: 'source-map',
    watch: true,

    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015', 'stage-0']
                }
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
            },
            {
                test: /\.less$/,
                exclude: /node_modules/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
            }
        ]
    },

    plugins: [
        new ExtractTextPlugin('styles.css')
    ]
};

Package.json dev dependencies

  "devDependencies": {
    "babel-core": "6.0.20",
    "babel-eslint": "4.1.3",
    "babel-loader": "6.0.1",
    "babel-preset-es2015": "6.0.15",
    "babel-preset-react": "6.0.15",
    "babel-preset-stage-0": "6.0.15",
    "eslint-plugin-react": "3.6.2",
    "freezer-redux-devtools": "^1.1.0",
    "css-loader": "^0.15.5",
    "extract-text-webpack-plugin": "^0.8.2",
    "less": "^2.5.1",
    "less-loader": "^2.2.0",
    "redux-devtools": "^2.1.5",
    "style-loader": "^0.12.3",
    "webpack": "^1.9.10",
    "webpack-dev-server": "^1.14.0"
  }

Folder structure:

client
   --> app
   --> dist
   --> public
   --> styles

Solution

  • I figured it out. works now! :-) I needed to setup multiple entry points like so:

    entry: [
        './client/app/root',
        './client/styles/styles.less'
    ],