SCSS导入相对于Root

我正在重构一个Angular应用程序,当我将组件移动到新的目录位置时,我发现@import在组件的SCSS文件中处理路径变得有点乏味.

例如,假设我的文件src/_mixins.scss位于应用程序的根目录中,组件src/app/my-widget/my-widget.component.scss就像这样导入SCSS @import '../../mixins';.一切都很好.

但后来我决定my-widget.component在另一个组件下真的是一个"共享组件" my-thingy.component,所以我创建了一个shared文件夹src/app/my-thingy并将其中的所有内容移动src/app/my-widget到其中.

我希望你还和我在一起......所以,现在我已经src/app/my-thingy/shared/my-widget修改了我的SCSS文件进行导入了@import '../../../../mixins'.

注意:这是一个简化的例子.有些路径相对较深(没有双关语...... 或者是它？)以及所有这些.并且/有点多.

TL; DR

如果从一开始我就可以在我的所有组件的SCSS文件中相对于根导入,这将是非常方便的, _mixins.scss所以我不必@import在重构时一直搞乱路径.(例如,某些东西@import '~/mixins').这样的事情存在吗？

我曾经尝试过(可悲的是,失败了):

@import '~/mixins'; /** I had real hope for this one **/

@import 'mixins'; /** Just being overly optimistic here **/

@import '~//mixins'; /** Now I'm just making stuff up **/

我知道我已经不得不修改我的mod文件以指向所有这些"移动的东西"的组件的新路径,但是......嘿,少一点,对吧？

1> Sasxa..：

---

如果您使用的角度CLI,看看全球的风格,"stylePreprocessorOptions"选择具体.

对于webpack,您可以includePaths在sassLoader插件配置中进行配置.

它与gulp构建类似,你传递includePaths给sass插件.

无论你的构建工具是什么,sass都会将这些路径视为root,因此你可以直接导入它们,所以:

includePaths: ["anywhere/on/my/disk"]

你可以@import 'styles'而不是@import 'anywhere/on/my/disk/styles'.

2> helcode..：

---

您还可以使用它{}来引用项目路径的顶级,因此类似的东西将起作用.

@import "{}/node_modules/module-name/stylesheet";

---

如果使用webpack(或angular-cli),访问`node_modules`下的库也可以使用代字号运算符来完成 - "@ import"~module-name/stylesheet";`