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 🙌🏻

module: {loaders: [{test: /\.js$/, exclude: /node_modules/, loaders: ['babel']},{test: /\.css$/, loaders: ['style', 'css']}]}, can you try this and make the plugins array in webpack to empty. — Gopi Gorantala
– Gopi Gorantala, Commented Feb 2, 2019 at 9:49
Do you implort css from the dist directory? The output is not set to dist directory but is that safe? I mean isn't there any other program to write in that folder? Can you show me your project structure? (Directories) — Ali Doustkani
– Ali Doustkani, Commented Feb 4, 2019 at 4:46
I created another project, which was custom and with no CRA... this time it worked... it must be due to the file structure. anyways, thanks for the help. Your answer worked when I did all from scratch. :-) — Kumar Abhirup
– Kumar Abhirup, Commented Feb 4, 2019 at 8:22

Ali Doustkani · Accepted Answer · 2019-02-02 11:48:01Z

4

@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.

answered Feb 2, 2019 at 11:48

Ali Doustkani

8089 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kumar Abhirup Over a year ago

Yet facing problems

Ali Doustkani Over a year ago

@Slach upload your project (or a sample) in git, and I will check it

Slach Over a year ago

@AliDoustkani github.com/faceyspacey/extract-css-chunks-webpack-plugin/issues/…

Collectives™ on Stack Overflow

Webpack css-loader is not importing CSS

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related