Can component's css files into page's css file?

[mybardaklar]

Hello @webdiscus,

I couldnt be sure what title i'll choose for this question. So forgive me :)

Probably you know Astro.js. I saw this system there. For example:

I have index.page.pug and about.page.pug files. And i also have button.component.pug and img.component.pug. If i import button.component.pug in index.page.pug, this component's styles codes should be index.page.css.
This import can be with tag or inline style. I dont know. I'll attach the link for you.

The link: https://docs.astro.build/en/guides/styling

Is it possible? If it is, i'll be really happy. Because i am sick of importing component's style files into page's style files.
That'll be cool feature.

Thank you.

[webdiscus]

Hi @mybardaklar,

This is not possible, sorry, because Pug is a templating engine and pug-loader is just a Webpack loader, not a framework like Astro.

But, in next release v5.0.0 will be possible import styles in a JavaScript component. So you can import one component in another containig imported styles and in result will be generated one CSS file with all imported styles.

[mybardaklar]

Next release? When? :)

[webdiscus]

I want to "marry" the webdiscus/pug-loader with my other plugin html-bundler-webpack-plugin => NEW pug-plugin v5.
This will be ultimate all-in-one solution with many new useful features.
It takes a lot of time for development and testing. I hope to do this in 2023.

[mybardaklar]

It'll be great, thank you for this great loader project :)

[webdiscus]

Hello @mybardaklar,

I have released the new version 3.5.0 of the html-bundler-webpack-plugin with supports the Pug preprocessor.

The next pug-plugin version v5.0.0 will be based on the html-bundler-webpack-plugin v.3.5.0, also will have the same features.
Therefore, you can already now use the html-bundler-webpack-plugin v.3.5.0 as pug-plugin beta 5.0.0 (will be released later over 1 month). The code of both plugins will be absolut the same, only for pug-plugin will be some default setting Pug specifically.

What's New:

• importing source styles (CSS, SCSS, etc) in JS/TS, so you can use your components w/o importing SCSS files in an additional page style file.
• you can reference any assets (styles, scripts, images, etc.) in tag attributes (src, href, etc) w/o require():

  link(href="../path/to/source/styles/main.scss")
  script(src="../path/to/source/scripts/main.ts")
  img(src="../path/to/source/images/picture.webp")

  NOTE: you can use an Webpack alias instead of th relative path. If not used require(), the path MUST BE relative to entry Pug file
• now you can pass any data into specific page as JSON or a file, in current pug-plugin is possible to pass global data only.

   new HtmlBundlerPlugin({
    entry: {
      index: {
        import: 'src/home.pug',
        // pass external data into home page
        data: {
          title: 'Home',
        },
      },
  
      about: {
        import: 'src/about.pug',
        // pass external data into about page
        data: {
           title: 'About',
        },
      },
    },
  
    // must be specified for the `Pug` templating engine, in `pug-plugin` it will be as default value
    preprocessor: 'pug',
  }),

• others many many mega cool features of the html-bundler-webpack-plugin, see in the readme.