Frontend Developer Manual / Version 2406.1
Table Of Contents
As described in Section 5.9, “Customizing the Webpack Configuration of a Theme”, you can customize our default configuration of
webpack in your theme's webpack.config.js
.
One usage might be that you need to split your themes styling into multiple CSS files in the target folder. Using
our default configuration only src/sass/$theme-name.scss
and src/sass/preview.scss
will be compiled and saved into target/.../css/$theme-name.css
and target/.../css/preview.css
.
You can specify additional SCSS files - so called entry points - using the following code in the webpack.config.js
of the theme:
const path = require("path"); const { webpackConfig } = require("@coremedia/theme-utils"); module.exports = (env, argv) => { const config = webpackConfig(env, argv); // make sure that configuration for entry exists config.entry = config.entry || {}; config.entry["additional-styles"] = [ path.resolve("src/sass/additional-styles.scss") ]; return config; };
The example will compile the given src/sass/additional-styles.scss
into
target/.../css/additional-styles.css
.
Note
There are limitations for this approach: Because of how our default webpack configuration is set up the additional
CSS files can only be generated into the same folder as the other CSS files of the theme as the rewriting of
url
statements inside the SCSS code will not work properly.