Angular自定义组件的partial scss文件约定存放位置是哪里？

按照前端组件化开发的通用惯例，存放位置完全取决于这个 partial 的作用范围，没有强制唯一规则，但行业内通用的约定如下：

• 组件私有、仅服务于单个自定义组件的 SCSS Partial：直接放在对应组件文件夹内部
  这是目前 React、Vue 等组件化技术栈的主流首选方案，partial 文件遵循 Sass 规范以下划线开头命名，比如_component-name.scss。这种存放方式的优势是组件和其专属样式强绑定，维护时不需要跨目录查找样式，组件迁移、删除的时候不会遗漏对应样式产生冗余代码。典型目录结构参考：

  src/
  └── components/
      └── UserCard/
          ├── index.tsx
          ├── types.ts
          └── _user-card.scss // 仅UserCard组件使用的partial
  

• 跨组件全局复用的 SCSS Partial：放在src/themes或src/styles下的对应子目录
  如果你的 partial 存的是全局主题变量、通用mixin、公共样式函数、全局重置样式、多套主题配置这类会被多个组件/页面引用的内容，就放在全局样式目录下，不要塞进单个组件目录。这类全局partial不要写具体的业务组件样式，只放抽象的可复用内容，典型目录结构参考：

  src/
  └── styles/
      ├── themes/
      │   ├── _default.scss
      │   └── _dark.scss
      ├── _variables.scss
      ├── _mixins.scss
      └── global.scss // 全局样式入口统一引入上述partial
  

• 不推荐的存放方式
  不要把组件私有样式散放到全局样式目录，会导致全局目录越来越臃肿，后续维护找不到样式对应的组件；也不要把全局复用的变量、mixin放到单个组件目录下，会导致其他文件引用时路径层级过深，重构时极易出现引用报错。

注意：所有Sass partial文件都需要以下划线开头命名，避免构建工具将其编译为独立的冗余CSS文件。

内容的提问来源于stack exchange，提问作者Skymett