Webpack not recognising css loader

Question

I've just started developing a system using asp.net MVC and react. While trying to integrate CSS (specifically for the react-table package styling, 'react-table/react-table.css'), webpack is refusing to compile it.

I've tried adding css-loader, style-loader, Mini-CSS-Extract-Plugin and an array of other rules but to no avail. I think I've looked at just about every relevant post here but no progress. I've also tried using a very basic css file to see if it was react-table. Whatever I try I get the error:

"Uncaught Error: Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file."

Here's the current webpack.config.js:

"use strict";

var path = require("path");
var WebpackNotifierPlugin = require("webpack-notifier");
var BrowserSyncPlugin = require("browser-sync-webpack-plugin");

module.exports = {
    entry: "./Scripts/Home/react/index.js",
    output: {
        path: path.resolve(__dirname, "./Scripts/dist/Home/react"),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: ['style-loader', 'css-loader?modules=true&camelCase=true'],
            },
            {
                test: /\.css$/,
                include: /node_modules/,
                loaders: ['style-loader', 'css-loader?modules=true&camelCase=true'],
            }

        ]
    },
    devtool: "inline-source-map",
    plugins: [new WebpackNotifierPlugin(), new BrowserSyncPlugin()]
};

And my package.json

    {
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "scripts": {
    "dev": "webpack --mode development --watch",
    "build": "webpack"
  },
  "devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "browser-sync": "^2.26.7",
    "browser-sync-webpack-plugin": "^2.2.2",
    "css-loader": "^3.0.0",
    "webpack": "^4.35.2",
    "webpack-cli": "^3.3.5",
    "webpack-notifier": "^1.8.0"
  },
  "dependencies": {
    "bootstrap": "^4.3.1",
    "lodash": "^4.17.11",
    "mini-css-extract-plugin": "^0.7.0",
    "namor": "^1.1.2",
    "react": "^16.8.6",
    "react-bootstrap": "^1.0.0-beta.9",
    "react-dom": "^16.8.6",
    "react-table": "^6.10.0",
    "style-loader": "^0.23.1",
    "styled-components": "^4.3.2"
  }
}

I was under the impression that it was as simple as adding the css-loader & style-loader to produce the desired result but unfortunately I've had no luck

Thanks in advance for any support!

Just a wild guess - does the CSS file have an import that might be causing this? — IrishChieftain
– IrishChieftain, Commented Jul 3, 2019 at 13:17
react-table.css may do, but even when I tried compiling with a very simple css file changing text size it didn't like it — JaamieT
– JaamieT, Commented Jul 3, 2019 at 13:22
@TonyNgo I have, unfortunately I don't have the rep for it to show :( Thank you for your help, your repository has shown me some really useful ideas! — JaamieT
– JaamieT, Commented Aug 15, 2019 at 13:19

Tony · Accepted Answer · 2019-07-03 15:53:58Z

You can try with my configuration. I'm using sass and you can remove it

module: {
        rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: ["babel-loader", "eslint-loader"]
            },
            {
                test: /\.(jpe?g|png|gif)$/i,
                loader: "file-loader"
            },
            {
                test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
                loader: "file-loader"
            }
        ]
    }

Full code can be found here

Collectives™ on Stack Overflow

Webpack not recognising css loader

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related