SCSS導入相對根目錄

Question

我正在重構一個Angular應用程序，當我將組件移動到新的目錄位置時，我發現在組件的SCSS文件中處理@import路徑變得有點乏味。

例如，假設我在我的應用程序的根目錄中有文件src/_mixins.scss，並且組件src/app/my-widget/my-widget.component.scss像這樣導入了SCSS @import '../../mixins';。一切都很好。

但後來我決定my-widget.component真的是在另一個組件my-thingy.component「共享組件」，所以我創建src/app/my-thingy下shared文件夾，並移動在src/app/my-widget到它的一切。

我希望你還在我身邊......所以，現在我已經得到了src/app/my-thingy/shared/my-widget和修改我的SCSS文件導入@import '../../../../mixins'。

注：這是一個簡化的例子。有些路徑相對較深（沒有雙關語...... 或是它？），並且所有這些.和/都有點多。

TLDR;

這將是超方便如果從一開始我可能只是進口_mixins.scss相對於我的所有組件的SCSS文件的根，所以我沒有跟上@import路徑搞亂時重構。 （例如沿着@import '~/mixins'的行）。 有這樣的事嗎？

我試過什麼（和可悲的是，失敗）：

1. @import '~/mixins'; /** I had real hope for this one **/
2. @import 'mixins'; /** Just being overly optimistic here **/
3. @import '~//mixins'; /** Now I'm just making stuff up **/

我明白，我已經打算不得不修改我的mod文件以指向組件的新路徑，而所有這些都是「移動的東西」，但是......嘿，恩，對嗎？

Answer 1

• 如果您正在使用角CLI，看看Global styles，"stylePreprocessorOptions"選項明確。
• 對於webpack，您可以在sassLoader插件配置中配置includePaths。
• 而且它與gulp構建類似，您將includePaths傳遞給sass插件。

無論你的構建工具是，上海社會科學院將把這些路徑爲根，這樣你就可以直接導入，所以用：

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

你可以只是@import 'styles'代替@import 'anywhere/on/my/disk/styles'。

Answer 2

您也可以使用{}來引用項目路徑的頂層，因此類似的東西可以工作。

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