Where should I put the .scss files in the scaffold?

Question

I have developed an open-source vue.js scaffold which is based on my exprience and study on various vuejs projects.

Currently it has a good structure(i think), but i'm nervous about is it good enough for a chat scaffold and the goal of this question is about where is the better place for scss files in this scaffold?

I want to know about your opinion with explanation, because i believe a good scaffold will help a lot to develop better web apps.

https://github.com/SeyyedKhandon/vuejs-persian-chat-scaffold/tree/develop

first one:

I think this is more manageable and reuse-able.

second one:

I think this will increase the speed of develop( by reduceing the time of going through other places to find the corresponding files)

third one

other opinion(tell me about)

Answer 1

I personally prefer the first one. but if page and layout are components, it can be nested inside the component folder.

style folder in the asset will look like this:

• global
  • bootstrap
  • material
  • fontawesome
• app
  • src
    • mixins
    • variables
    • z-admin
    • z-components
      • _form
        • _tag.scss (npm package included and customized)
        • form.scss
      • _page
      • _layout
      • _tool
      • _tostify.scss (npm package)
      • components.scss
    • z-print
    • z-template
    • _animation.scss
    • _common.scss
    • _shadow.scss
    • _z-index.scss
    • main.scss
  • skin-default
  • skin-orange

Answer 2

I have limited vue.js experience. I will ask a question and answer it for you.

Q: why not using "Single File Components"?
A: Some components would require very large files and including styles, will make them even larger. As a result of this, readability and maintainability will be getting harder.
Q: so what should we do then?
A: I suggest you separate component styles and template to SCSS and HTML files and import them in your components, then put these 3 and a test file beside them in a folder with the component name. then you will have a folder which contains all things you need and you can take it anywhere you want.
Then you can have any kind of folder structure for your application to adopt.