SCSS导入相对于根

Gil理查德2020-03-20

我正在重构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'）。是否存在这样的东西？

我尝试过的（不幸的是，失败了）：

我知道我已经不得不修改我的mod文件，以指向具有所有这些“四处移动”的组件的新路径，但是...嘿，少了一件东西，对吧？

A神乐2020/03/20 14:01:41

定义的路径取决于您的Angular版本。在我们的项目中，旧版本使用angular-cli.json新版本使用angular.json：

在“ @ angular / cli”处：“〜1.7.4”在以下路径中使用angular-cli.json：

"stylePreprocessorOptions": {
    "includePaths": [
      "../src",
      "./scss"
    ]
  },

在“ @ angular / cli”：“〜7.0.6”处，使用以下命令：

"stylePreprocessorOptions": {
    "includePaths": [
       "./src",
       "./src/scss"
    ]
 }

Gil伽罗小宇宙2020/03/20 14:01:41

您还可以使用{}引用项目路径的顶层，因此类似的东西会起作用。

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

Newest Answer