CODEWITHSUNDEEP
cssreactjswebpack
wei du
wei du

Reputation: 95

Webpack 4.6.0 loading css file: You may need an appropriate loader to handle this file type

I have been using webpack 4.6.0:

I have following issue when compiling:

Uncaught Error: Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type.
| div {
|     background-color: yellow;
|     color: red;

my webpck config is as following:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  mode:'development',
  entry: './src/code/app.js',
  output: { path: __dirname, filename: 'bundle.js'},
  watch: true,

  module: {
    rules: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          plugins: "transform-class-properties",
          presets: ['es2015', 'react']
        }
      },
      {
        // Do not transform vendor's CSS with CSS-modules
        // The point is that they remain in global scope.
        // Since we require these CSS files in our JS or CSS files,
        // they will be a part of our compilation either way.
        // So, no need for ExtractTextPlugin here.
        test: /\.css$/,
        include: /node_modules/,
        loader: 'css-loader'
      }
    ]
  }
};

and I have :

"css-loader": "^0.28.11",

and my file struct is like:

root:
-src
 |-code
   |-XXXX.js
 |-css
   |-HomePage.css

I think it is something related to my css loader, I have tried many methods online, but none of them works. Is there something related to my file structure?

Upvotes: 0

Views: 7220

Answers (1)

Sherman Hui
Sherman Hui

Reputation: 998

I believe you still need to add a rule for your own css files. Try adding this to your rules.

{
  // Preprocess your css files
  // you can add additional loaders here (e.g. sass/less etc.)
  test: /\.css$/,
  exclude: /node_modules/,
  use: ['style-loader', 'css-loader'],
}

Upvotes: 7

Related Questions