1

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?

  • Webpack does not provide a way to do that, you have to reference on your files. Here is an article that explains how webpack works: https://medium.com/@matheus_gsilva/understanding-how-webpack-actually-works-b6fffd8c670d – PlayMa256 Aug 13 '18 at 15:20

2 Answers2

1

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';
0

@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

DJNorris
  • 85
  • 8