如何在组件的SCSS文件目录中引用？

目前我有以下目录结构:

stylesheets
..modules
...._all.scss
...._colors.scss
..partials
...._all.scss
...._Home.scss
..main.scss

在我的_Home.scss身上:

@import '../modules/all';

.headerStyle {
  color: pink;
  font-size: 15;
  font-weight: 500;
}

在我的main.scss导入所有_all.scssin stylesheets文件夹,如:

@import 'modules/all'
@import 'partials/all'

html { font-family: 'Roboto', sans-serif; }
body {
  margin: 0;
  background-color: orange
}

最后在我的组件中,我会像这样导入样式表:

import '../../stylesheets/main.scss'

...

Header

然而,在div不被风格化与.headerStyle在_Home.scss.我检查了目录路径main.scss,它是正确的,我没有收到任何错误.

以下实际应用:

body {
  margin: 0;
  background-color: orange
}

我能做错什么？是否有更好的方法将样式表导入组件,而不是每次为组件定义它？

提前谢谢你,并将upvote /接受答复.