React/Webpack Css imports from node_modules are not loading correctly

Question

I am using these three css imports from various packages:

// want to do import 'path/to/css.css'
import slickCss from "slick-carousel/slick/slick.css"
import slickCssTheme from "slick-carousel/slick/slick-theme.css"
import leafcss from 'leaflet/dist/leaflet.css'

console.log(`Slick Css: `, slickCss)
console.log(`Slick Theme Css: `, slickCssTheme)
console.log(`leaf css: `, leafcss)

If I log those out they are all empty objects:

Slick Css:  {}
Slick Theme Css:  {}
leaf css:  {}

I assume that something is going wrong with how I am using the loader for webpack. For the most part that I can see everything else is working as far as the react bundle goes. For now I will attach my webpack to not over complicate things. If there is no problem with the webpack I will start adding the necessary files. I tried the alias and still got the same result.

var path = require(`path`)

module.exports = {
  mode: `development`,
  entry: `./scripts/inject.js`,
  output: {
    path: path.resolve(__dirname, `dist`),
    filename: `bundle.js`,
  },
  resolve: {
    extensions: [`.html`, `.js`, `.json`, `.scss`, `.css`],
    alias: {
      leafModule: __dirname + `/node_modules/leaflet/dist/leaflet.css`,
    },
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: `file-loader`,
          },
        ],
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: `file-loader`,
            options: {
              name: `[name].[ext]`,
              outputPath: `fonts/`,
            },
          },
        ],
      },
      {
        test: /\.css$/i,
        use: [`style-loader`, `css-loader`],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use:  {
          loader: `babel-loader`,
          options: {
            presets: [`@babel/preset-env`],
          },
        }, 
      },  
    ],
  }, 
}

tmhao2005 · Accepted Answer · 2020-10-29 09:48:19Z

1

I'm not sure your setup is able to collect your style properly. From my point of view, you can use mini-css-extract-plugin to help you collect your css. Here is additional code you may add to your webpack.config.js:

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
 // ...
 modules: {
  rules: [
    {
      test: /\.css$/i,
      use: [
        {
          loader: MiniCssExtractPlugin.loader,            
        },
        {
          loader: `css-loader`,
          options: {
            // Enable css as module so we can import
            modules: true,
          },
        },
      ],
    },
  ],
 },

 plugins: [
  // ...
  new MiniCssExtractPlugin({
    filename: '[name].css',
    chunkFilename: '[id].css',
  }),
 ]
}

However, keep in mind that if you switch css to module, it won't inject automatically anymore since each class name will be renamed so you have to import and add manually like:

import css from "path/to/css";

<div classSName={css.headerClass} />

As a result of that, you will have trouble with 3rd packages which have css files to import as your case.

edited Oct 29, 2020 at 9:48

answered Oct 28, 2020 at 15:31

tmhao2005

17.7k4 gold badges46 silver badges52 bronze badges

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

12 Comments

Taylor Austin Over a year ago

Still an empty object after adding the modules: true

tmhao2005 Over a year ago

Do you have a reproducible repo?

Taylor Austin Over a year ago

see the Inject script info in the readme to see what I'm doing. Ignore the CRA stuff for now. github.com/tbaustin/react-leaflet-locator

Taylor Austin Over a year ago

I looked inside the bundle and it references ./node_modules which I don't think exist in the folder that gets created only in the root.

tmhao2005 Over a year ago

One more thing, in order to save your time as develop I think you should use html-webpack-plugin to create your index.html file which webpack will inject the bundle into it, and utilize webpack-server as your server which has live reload that helps you update your app straight away as your made changes on your code

|

Collectives™ on Stack Overflow

React/Webpack Css imports from node_modules are not loading correctly

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related