CODEWITHSUNDEEP
cssreactjswebpackfrontend
foviedo
foviedo

Reputation: 55

How to generate different CSS bundle with Webpack 5

I have a React project with webpack (own configuration), from which I need to generate different packages with different styles. It would always be the same application, only in each package it generates, it would need a particular css file to end up in the package. For example, in the repository I would have different css files:

- src
  - index.js
  - index.html
  - themes
    - theme1
        theme1.css
    - theme2
        theme2.css
    - theme3 
        theme3.css

and when I build it should look like this: (in "build" folder)

- build
     index.html
     main.css // with the styles of theme2, for example
     bundle.js

I don't know how to do this with webpack or which plugin, hope you help me. Thanks

Upvotes: 0

Views: 1438

Answers (1)

mupinnn
mupinnn

Reputation: 122

You can get multiple separate CSS by adding multiple entries in your configuration.

Example:

webpack.config.js

module.exports = {
  entry: {
    main: "./path/to/your_main.js",
    "css-theme-1": "./path/to/your/theme.css",
    "css-theme-2": "./path/to/your/another-theme.css",
  }
}

Also, you can build it into a folder by configuring filename properties in mini-css-extract-plugin.

Further reading:

Upvotes: 2

Related Questions