javascriptcsswebpackextract-text-plugin

Trying to Bundle CSS with ExtractTextPlugin


I'm trying to bundle my CSS into one file with Webpack. I've already got it working for my scripts.but I get an error with my CSS:

Module not found: Error: Can't resolve 'circle.css' in 'C:\Projects\tag-validator-front2\src\css'.

Here's my Webpack config:

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

module.exports = {
  entry: ["./src/ts/main.js","./src/css/css.js"],
  module: {
      loaders: [
        {
          test: /\.jsx?$/,
          loader: "babel-loader"
        },
        {
          test: /\.css/,
          loader: ExtractTextPlugin.extract("css")
        }
      ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css")
  ],
  output: {
    filename: "public/bundle.js"
  }
}

main.js is for my scripts and is working, but css.js isn't. Here's css.js:

"use strict";
import circleStyles from 'circle.css';

I'm only importing one right now until I get it working, but all of my CSS will be in that directory and most in sub folders.


Solution

  • Try to use relative import path: import './circle.css';