Hello. Where do I put module js and scss? Either in Pyz/Zed/MyModule/assets/js / Pyz/Zed/MyModule/as

UQS4LDZU7

Hello. Where do I put module js and scss? Either in Pyz/Zed/MyModule/assets/js / Pyz/Zed/MyModule/assets/scss or in public/assets/Zed/MyModule/ js (scss) ?

Ievgen Varava

public/assets contains files that are generated during frontend build

UQS4LDZU7

So, that means, I put js and scss in Pyz/Zed/MyModule/assets/js/myModule.js and Pyz/Zed/MyModule/assets/scss/main.scss, right?

UQS4LDZU7

Its a zed gui module which extends the core Zed module ProductCategory

giovanni.piemontese

Hi Alexey,
just create on project level backend/build.js

const oryx = require('@spryker/oryx');
const oryxForZed = require('@spryker/oryx-for-zed');
const { join } = require('path');
const customContext = process.cwd();
const projectPath = '/src/';
const myCustomZedSettings = Object.assign({}, oryxForZed.settings, {
    ...oryxForZed.settings,
    entry: {
        ...oryxForZed.settings.entry,
        dirs: [
            ...oryxForZed.settings.entry.dirs,
            join(customContext, projectPath)
        ]
    }
});
oryxForZed.getConfiguration(myCustomZedSettings).then(configuration => oryx.build(configuration)); 

then in package.json just replace the zed build something like so:

"zed": "node ./backend/build",
    "zed:watch": "node ./backend/build --dev",
    "zed:development": "node ./backend/build"

and then u can just put your js or css as the same as in vendor.. and the zed build will compile js and css take care on your project level extension or new entry point etc...

giovanni.piemontese

z.B so...

UQS4LDZU7

Just great. Thats exactly what I was looking for the whole time. Unfortunately it seems not to be documented in docs. Thank you very much, @UL65CH0MC, I will try and drop a message afterwards.

UQS4LDZU7

~So. The build works. But the css from the Pyz/Zed/ProductCategory/assets/scss/main.scss~

body {
    background-color: red;
}

~is still not compiled together with vendor ProductCategory main.scss. Only the vendor main.css gets compiled, not the project one.~

UQS4LDZU7

It works. Wow.

giovanni.piemontese

@UQS4LDZU7 please put also here the suggested solution from me so everyone know how it works also for css... 😉

UQS4LDZU7

Yes. Sure.

UQS4LDZU7

So.

UQS4LDZU7

Assume, you have to extend vendor zed module ProductCategory. And you have to add your own css to the vendor one. For that you have to:

UQS4LDZU7

1. Follow the @UL65CH0MC down from this message: https://sprykercommunity.slack.com/archives/CKJRJM5FG/p1588843929325100?thread_ts=1588843022.323700&cid=CKJRJM5FG

UQS4LDZU7

2. Provide a structure in your Pyz Module like this:

UQS4LDZU7

3. provide the content for main.js:

'use strict';
require('../../scss/main.scss');

UQS4LDZU7

4. provide the content for +++.entry.js:

'use strict';

require('./modules/main');

UQS4LDZU7

Provide your custom styles for main.css:

UQS4LDZU7

body {
    background-color: #31b600;
}

UQS4LDZU7

then you just run in the console npm run zed

UQS4LDZU7

and check, that both assets (js and css) are generated in public/Zed/assets

UQS4LDZU7

Then you go in zed backend to, say, http://zed.de.spryker.local/product-category/assign?id-category=6

UQS4LDZU7

and see, that body got blue

UQS4LDZU7

thats it.

giovanni.piemontese

thanks!

UQS4LDZU7

thanks back 🙂

UQS4LDZU7

ps. Forgotten. Last step: In the index.twig put the reference to your css file:

{% block head_css %}
    {{ parent() }}
    <link rel="stylesheet"  href="{{ assetsPath('css/pyz-zed-product-category-main.css') }}" />
{% endblock %}