extract-text-webpack-plugin does not create CSS file

Question

I have webpack.config.js that creates bundle.js but for some reason it does not create any css file although I have css-loader, style-loader and extract-text-webpack-plugin.

my webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './client/index.html',
  filename: 'index.html',
  favicon: './client/asset/favicomatic/favicon.ico'
});
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const BUILD_DIR = path.resolve(__dirname, 'dist');

module.exports = {
  entry: ['./client/src/index.js'],
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
      { 
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  plugins: [HtmlWebpackPluginConfig, new ExtractTextPlugin('style.css')]
};

I was hoping that I was creating this bundled css file at somewhere else I do not see any css file in my folders.

If anyone can find what I'm doing wrong, please let me know.

Thank you,

Rakesh Kumar Cherukuri · Accepted Answer · 2018-05-31T09:48:57.923

3

Configuration looks good to me.

General : While webpack loaders does resource specific tasks, its the source code that needs to define the dependency. In your source code wherever you need that CSS styles, you need to import that CSS file. It may sound strange to hear for the first time but thats how webpack works.

Webpack should process the CSS dependencies in the dependency graph. If the output css file is not created then the likely missing piece is dependency declaration in source code i.e require("./css-file-here") or import "./css-file-here"

From webpack Guide here

This enables you to import './style.css' into the file that depends on that styling.

Does the output show any signs it processed the CSS source files ?

In case if it helps have look at the src/entry.js in this repo : webpack-bootstrap . While at it you can try it to see how bootstrap styles applied via webpack.

edited May 31 '18 at 09:48

answered Dec 15 '17 at 18:54

Rakesh Kumar Cherukuri

1,251
9
25

Do you mean that I have to import my css folder into webpack? And when I do webpack -d, it does not have any css thing. It only has bundle.js, favicon.ico and index.html. – ckim16 Dec 15 '17 at 18:59
While webpack loaders does resource specific tasks, its the source code that needs to define the dependency. In your source code wherever you need that CSS styles, you need to import that CSS file. It may sound strange to hear for the first time but thats how webpack works. IN case if it helps have look at the `src/entry.js` in this repo : https://github.com/rakcheru/webpack-bootstrap . While at it you can try it to see how bootstrap styles applied via webpack. – Rakesh Kumar Cherukuri Dec 15 '17 at 19:12
Think I got it. Thank you so much for your help! – ckim16 Dec 15 '17 at 19:19

extract-text-webpack-plugin does not create CSS file

1 Answers1