File structring like Angular

[mybardaklar]

I have a question for file structuring.

Let's say we have a folder structure like this: pages, components.

I have a Button component folder. Inside of it, there are "button.component.pug" file, "button.component.js|ts" file and "button.component.scss" file. If I would use this component inside any page, this component's css and js|ts files should be automatically imported inside that page's css and js. For example: Button component used in index page but it wasn't used in about page. So Button component's css and js exports should be only in index page's css and js export.

By the way we can use this component in pug with "include" keyword or "mixin" keyword.

Is it possible something like that? Do you have any idea for this? It looks like Angular file structring. I know. :) I like it anyway.

[mybardaklar]

I wanna do something like this because of unused css styles. I dont use Button component in about page. But Button component's css export is still in this page's css file. I dont want this.

[webdiscus]

Hi @mybardaklar,

I use the following file structure in my projects under ./src:

assets/
  fonts/
  images/
  scripts/
    main.js // global used scripts on each page (e.g. navigation, route, etc)
  styles/
    main.scss // global used styles on each page (e.g. layout, header, footer, etc)

components/
  button/
    index.js
    index.scss
    mixins.pug
  ...
views/
  layouts/
    default.pug
  partials/
    header.pug
    footer.pug
  pages/
    home/
      index.pug
      styles.scss
      scripts.js
    about/
       index.pug
       styles.scss
       scripts.js
    ...

Used Webpack aliases:

alias: {
  '@components': path.join(__dirname, 'src/components/'),
  '@views': path.join(__dirname, 'src/views/'),
  '@scripts': path.join(__dirname, 'src/assets/scripts/'),
  '@styles': path.join(__dirname, 'src/assets/styles/'),
  '@images': path.join(__dirname, 'src/assets/images/'),
  '@fonts': path.join(__dirname, 'src/assets/fonts/'),
}

./src/views/layouts/default.pug

html
  head
    block styles
      link(rel='stylesheet' href=require('@styles/main.scss'))
      //- here will be append page specifically styles
    block scripts 
      script(src=require('@scripts/main.js') defer='defer')
      //- here will be append page specifically scripts
 
 body
   block header
     //- include default header but it can be overriden from a page
     include @views/partials/header
   
   //- content of page
   block content
   
   block footer
     // include default footer but it can be overriden from a page
     include @views/partials/footer

./src/views/pages/home/index.pug => ./dist/index.html

extends @views/layouts/default

//- include component mixins  used on the page
include @components/buttons/mixins

append styles
  //- append to layout the page specifically styles
  link(href=require('./styles.scss') rel='stylesheet' )

append scripts
  //- append to layout the page specifically scripts
  script(src=require('./scripts.js') defer='defer')

block content
  h1 Homepage
  //- mixin from ./src/components/button/mixins.pug
  +btn('click me!').my-button

./src/views/pages/home/scripts.js - this is the entry-point for all scripts used on the page

import Button from '@components/button'
// here should be imported scripts from all used components

./src/views/pages/home/styles.scss - this is the entry-point for all styles used on the page

@use '@components/button' as *;
// here should be imported (via `@use` or `@forward`) styles from all used components

.my-button {
  @include button;
  background-color: green;
}

.page-content{
  // ...
}

[mybardaklar]

You are saying that i should import them manually like you? Isnt there any automatic way for this?

[webdiscus]

It's not a framework like Angular, it's only a plugin.
Yes of cause, all what you need should be imported manually.