Trouble with importing component-specific SCSS and JS

Created on 4 April 2024, 3 months ago
Updated 17 April 2024, 2 months ago

Hello!

I'm facing an issue with importing component-specific SCSS and JS.

After generating or adding a component to my sub-theme, do I need to additionally import the SCSS and JS of this component somehow?

To ensure the proper functioning of the component styles, I've imported them into "src/scss/main.style.scss". Is this the correct approach, or is there another way to do this?

From the documentation, I understand that SCSS and JS should be automatically loaded via SDC. However, this isn't working for me.

What am I doing wrong?

🐛 Bug report
Status

Closed: works as designed

Version

6.0

Component

Code

Created by

🇧🇾Belarus Dmitry Kovalevsky

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @Dmitry Kovalevsky
  • Status changed to Fixed 3 months ago
  • Hey Dmitry, no need to add your stand alone CSS/JS or any other assets to anywhere else but it should load on it's own as long as you kept the same name for the component folder, the CSS, js and the twig file.

    I suggest that you read the documentation here

  • 🇧🇾Belarus Dmitry Kovalevsky

    In that case, why if I:

    - Using drupal-radix-cli add, add the component "page," then change {% include 'radix:page-content' %} to {% include 'mytheme:page-content' %} in "mytheme/components/page/page.twig";
    - Add the component "page-content." In "mytheme/components/page-content/page-content.scss," add .page__header {background-color: red;};
    - In "mytheme/templates/page/page.html.twig," change {% include 'radix:page' %} to {% include 'mytheme:page' %};

    ...then if I use npm run watch and drush cr, the styles won't be applied?

  • Status changed to Active 3 months ago
  • 🇧🇾Belarus Dmitry Kovalevsky

    I noticed that the issue only arises on the local server, but everything imports correctly on the remote server. What could be the reason for this?

  • 🇨🇿Czech Republic milos.kroulik

    There's at least one more use case where component CSS and JS files aren't imported - when the component is included (or embeded) in views fields that support twig. Perhaps it would be good to mention, but it's the SDC issue, not something specific to radix.

  • 🇮🇳India mdmanouwer

    Hi I have the same issue its not loading componet css and js of custom theme componets

  • 🇮🇳India mdmanouwer

    this issue occurs on window system due to mix path of forward slash and backward slash

    please update code of makePathRelativeToLibraryRoot() function as
    private function makePathRelativeToLibraryRoot(string $path): string {
    $library_provider_root = $this->moduleHandler
    ->getModule('sdc')
    ->getPath();
    $num_dots = count(
    array_filter(explode(DIRECTORY_SEPARATOR, $library_provider_root))
    );
    $dots = str_repeat('../', $num_dots);
    $path_from_root = str_starts_with($path, $this->appRoot)
    ? substr($path, strlen($this->appRoot) + 1)
    : $path;
    $path_from_root=str_replace('\\','/',$path_from_root);
    //return $dots . $path_from_root;
    $path_from_root= "/" . $path_from_root;
    return $path_from_root;
    //return $dots . $path_from_root;
    }

    will work patch i will attach here soon

  • Status changed to Downport 2 months ago
  • Status changed to Closed: works as designed 2 months ago
  • Thanks for the patch, but if it's an SDC issue, you have to patch it in Drupal core queue, this patch doesn't apply to Radix but rather core. if that's the issue, I have no means of testing this on a Windows machine, but thanks anyways. closing the ticket.

Production build 0.69.0 2024