How to include vendor specific styling in Shopware’s theme compiling build process

Question

I’ve installed a vendor library as NPM package in the storefront. The vendor provides a build script for compiling a CSS file, which you can run as NPM command. All working fine, but I’m stuck in the next step.

What I want is to include the CSS file in the main CSS of Shopware (all.css). I noticed this is defined in the ThemeCompiler class, but the functions are all private so I can’t override/extend it (or am I wrong?). I looked further and found the ThemeCompilerEnrichScssVariablesEvent, but this is only used for adding new variables and not complete files.

How can I include the build script from the vendor in the theme:compile command? Do I need to create a webpack config or are there other solutions to get this working? In the most ideal situation I just run theme:compile and in the background the NPM build script runs and includes the compiled CSS file to the main theme CSS file (all.css).

Any idea’s which approach I can follow to get this working?

score 0 · Answer 1 · answered May 13 '23 at 17:35

The theme:compile command does not use the webpack config. It's a pure scss compiler written in php. When you extend the webpack config, it only takes effect, when you pre-compile assets using either composer build:js:storefront or the former bin/build-storefront.sh. If the npm script allows you to define where it puts the css file, you should have it run prior the pre-compilation and have it put the css file within src/Resources/app/storefront/src/scss where you could then include it in your base.scss.

To extend the webpack config to run a command before compilation, see this question. As an example I'm going to borrow the top answer from there.

// <plugin root>/src/Resources/app/storefront/build/webpack.config.js
const { join, resolve } = require('path');
const WebpackShellPlugin = require('webpack-shell-plugin');

module.exports = () => {
    let dir = __dirname;
    // remove /build from current directory
    dir = dir.substr(0, dir.length - 6);

    return { 
        plugins: [
            new WebpackShellPlugin({
                onBuildStart:[`npm --prefix ${dir} build-css ${dir}/src/scss/pre-built.css`]
            })
        ]
    }; 
}

/* <plugin root>/src/Resources/app/storefront/src/scss/base.scss */

@import 'pre-built.css';

How to include vendor specific styling in Shopware’s theme compiling build process

1 Answers1