12

I have a javascript module that imports a CSS file. The CSS is included in the build in webpack 'development' mode, but not in 'production' mode. This will be because treeshaking sees the CSS file as not having any side effects. The recommended way of dealing with this is to add "sideEffects": ["*.css"]to package.json, which I have done. For good measure, I have also added a sideEffects property to the css rule in the webpack config. However, the CSS file is still not included. What more should I do?

Extract from package.json:

{
  "name": "psm",
  "version": "1.0.0",
  "description": "PRISM: Participatory System Mapping",
  "main": "prism.html",
  "sideEffects": ["*.css"],
  "scripts": {
    "dist": "webpack --mode=development",
    "build": "webpack --config webpack.prod.js",

Extract from webpack.prod.js:

  module: {
    rules: [
        {
            test: /\.css/,
            use: [MiniCssExtractPlugin.loader, 'css-loader'],
            sideEffects: true
            },
        ],
    },

The import statement is:

import "vis-network/dist/vis-network.min.css";

This is using npm version 6.1.4 and webpack 4.42.1

Nigel
  • 585
  • 1
  • 5
  • 20

1 Answers1

0

try adding new MiniCssExtractPlugin(), in plugins as shown below

plugins: [
        new MiniCssExtractPlugin(),                     
        new WebpackManifestPlugin()
    ],
shubham kedia
  • 1