loading table of contents...

Frontend Developer Manual / Version 2310

Table Of Contents

5.10 Building Additional CSS Files from SCSS

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.



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.

Search Results

Table Of Contents

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.