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.