Webpack css-loader is not importing CSS

Question

I have Server rendered my create-react-app by reading this tutorial .

And now, I cannot import CSS files in .js files!

Tried using style-loader , css-loader , extract-text-webpack-plugin , mini-css-extract-plugin , tried tweaking webpack configuration, but nothing helped.

NO StackOverflow answer helped. So this question. 😅

This is my package.json :

{
  ...
  "scripts": {
    "dev:build-server": "NODE_ENV=development webpack --config webpack.server.js --mode=development -w",
    "dev:start": "nodemon ./server-build/index.js",
    "dev": "npm-run-all --parallel build dev:*",
    "start": "serve --single ./build",
    "client": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "now-build": "react-scripts build && mv build dist",
    "deploy": "npm run build && now ./build -A ../now.json --public --name=kumarabhirup"
  },
  ...
}

This is webpack.server.js

const path = require('path');
const nodeExternals = require('webpack-node-externals');
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: './server/index.js',

  target: 'node',

  externals: [nodeExternals()],

  output: {
    path: path.resolve('server-build'),
    filename: 'index.js'
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        // use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader'] NOT WORKED
        use: ExtractTextPlugin.extract('style-loader', 'css-loader') // NOT WORKING
      },
      {
        test: /\.scss$/,
        use: [
            "style-loader",
            "css-loader",
            "sass-loader"
        ]
      }
    ]
  },

  plugins: [
    new webpack.EnvironmentPlugin({...process.env}),
    new ExtractTextPlugin('[name].css') // TRIED THIS TOO
    // new MiniCssExtractPlugin({ TRIED THIS
    //   filename: 'style.css',
    // })
  ]
};

Error it throws at me when I, import 'react-circular-progressbar/dist/styles.css' ,

/Users/iqubex/Sites/kumarabhirup/kumarabhirup/node_modules/react-circular-progressbar/dist/styles.css:7
.CircularProgressbar {
^

SyntaxError: Unexpected token .
    at new Script (vm.js:83:7)
    at createScript (vm.js:267:10)
    at Object.runInThisContext (vm.js:319:10)
    at Module._compile (internal/modules/cjs/loader.js:686:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:734:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Module.require (internal/modules/cjs/loader.js:659:17)
    at require (internal/modules/cjs/helpers.js:22:18)
[nodemon] app crashed - waiting for file changes before starting...

All that I expect is the working of imported CSS files. Please help 🙌🏻

Answer 1

@gopigorantala is right.

Change the loader to one of these, it should work:

use: ['style-loader', 'css-loader']

or

use: [MiniCssExtractPlugin.loader, 'css-loader']

You probably won't need to use ExtractTextPlugin. Just use MiniCssExtractPlugin. It'll work.

The style-loader loads the styles into DOM with <style> at runtime, and MiniCssExtractPlugin extract them to a separate file. So you don't need to use both of them.