CODEWITHSUNDEEP
webpackmini-css-extract-plugin
user6269864
user6269864

Reputation:

Webpack and MiniCssExtractPlugin does not bundle CSS files

I am trying to follow the manual here: https://webpack.js.org/plugins/mini-css-extract-plugin/

My config is exactly as stated there. My goal is to produce a single CSS file which is a bundle of multiple CSS files that are located in the src/css/ folder.

When I run the build, I don't receive any CSS files in the dist/ folder.

I think I am missing how to actually include CSS files into the build. Those CSS files are not referenced anywhere in my code, they are injected dynamically by JavaScript that appends a <link> tag into the document.

How do I point webpack to pick up and bundle the CSS files when they are not explicitly referenced in my code?

Upvotes: 1

Views: 1226

Answers (2)

DJNorris
DJNorris

Reputation: 95

@user6269864 It references that in the 2nd sentence of the description in mini-css-extract-plugin:

It creates a CSS file per JS file which contains CSS.

To include CSS in a Js file, webpack provides import through a basic config like this:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

The above config is in their documentation, which also includes how to import: import css from 'file.css'; Webpack css-loader

Upvotes: 0

user6269864
user6269864

Reputation:

I found this - this syntax is not mentioned anywhere in the documentation.

You can mention the CSS files in any JavaScript file, and then the MiniCssExtractPlugin will pick it up. Example:

import './css/button.css';
import './css/chat.css';

Upvotes: 1

Related Questions