What are the Slack Archives?

It’s a history of our time together in the Slack Community! There’s a ton of knowledge in here, so feel free to search through the archives for a possible answer to your question.

Because this space is not active, you won’t be able to create a new post or comment here. If you have a question or want to start a discussion about something, head over to our categories and pick one to post in! You can always refer back to a post from Slack Archives if needed; just copy the link to use it as a reference..

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

Posts: 182 πŸ§‘πŸ»β€πŸš€ - Cadet
edited May 2020 in Help

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) ?

Welcome!

It looks like you're new here. Sign in or register to get started.

Comments

  • Sprykee Posts: 154 πŸ§‘πŸ»β€πŸš€ - Cadet

    public/assets contains files that are generated during frontend build

  • Posts: 182 πŸ§‘πŸ»β€πŸš€ - Cadet
    edited May 2020

    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?

  • Posts: 182 πŸ§‘πŸ»β€πŸš€ - Cadet
    edited May 2020

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

  • Technical Lead @ LΓΆffelhardt Spryker Solution Partner Posts: 871 πŸ§‘πŸ»β€πŸš€ - Cadet

    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...

  • Technical Lead @ LΓΆffelhardt Spryker Solution Partner Posts: 871 πŸ§‘πŸ»β€πŸš€ - Cadet

    z.B so...

  • Posts: 182 πŸ§‘πŸ»β€πŸš€ - Cadet

    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.

  • Posts: 182 πŸ§‘πŸ»β€πŸš€ - Cadet
    edited May 2020

    ~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.~

  • Posts: 182 πŸ§‘πŸ»β€πŸš€ - Cadet

    It works. Wow.

  • Technical Lead @ LΓΆffelhardt Spryker Solution Partner Posts: 871 πŸ§‘πŸ»β€πŸš€ - Cadet
    edited May 2020

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

  • Posts: 182 πŸ§‘πŸ»β€πŸš€ - Cadet

    Yes. Sure.

  • Posts: 182 πŸ§‘πŸ»β€πŸš€ - Cadet

    So.

  • Posts: 182 πŸ§‘πŸ»β€πŸš€ - Cadet

    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:

  • Posts: 182 πŸ§‘πŸ»β€πŸš€ - Cadet
    1. Provide a structure in your Pyz Module like this:
  • Posts: 182 πŸ§‘πŸ»β€πŸš€ - Cadet
    1. provide the content for main.js:
    'use strict';
    require('../../scss/main.scss');
    
  • Posts: 182 πŸ§‘πŸ»β€πŸš€ - Cadet
    1. provide the content for +++.entry.js:
    'use strict';
    
    require('./modules/main');
    
  • Posts: 182 πŸ§‘πŸ»β€πŸš€ - Cadet

    Provide your custom styles for main.css:

  • Posts: 182 πŸ§‘πŸ»β€πŸš€ - Cadet
    body {
        background-color: #31b600;
    }
    
  • Posts: 182 πŸ§‘πŸ»β€πŸš€ - Cadet

    then you just run in the console npm run zed

  • Posts: 182 πŸ§‘πŸ»β€πŸš€ - Cadet

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

  • Posts: 182 πŸ§‘πŸ»β€πŸš€ - Cadet
  • Posts: 182 πŸ§‘πŸ»β€πŸš€ - Cadet

    and see, that body got blue

  • Posts: 182 πŸ§‘πŸ»β€πŸš€ - Cadet

    thats it.

  • Technical Lead @ LΓΆffelhardt Spryker Solution Partner Posts: 871 πŸ§‘πŸ»β€πŸš€ - Cadet

    thanks!

  • Posts: 182 πŸ§‘πŸ»β€πŸš€ - Cadet

    thanks back πŸ™‚

  • Posts: 182 πŸ§‘πŸ»β€πŸš€ - Cadet

    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 %}
    

Welcome!

It looks like you're new here. Sign in or register to get started.