SCSS导入相对于Root

Question

我正在重构一个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文件以指向所有这些"移动的东西"的组件的新路径,但是......嘿,少一点,对吧？

Answer 1

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

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

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

使用自动化 CLI 命令将 Angular 5 升级到 Angular 7 后，我遇到了 `npm test`（使用 Karma）的问题。原来`angular.json` 中的“test.options”部分也需要`stylePreprocessorOptions`！ (3认同)

Answer 2

如果我正确理解了这个问题，那么 using@import 'src/app/...'工作正常。

例如

@import 'src/mixins';

请注意，路径上没有前导反斜杠。

（这是在 Angular 9 上测试的）

Answer 3

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

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

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

Answer 4

路径的定义取决于您的 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"
    ]
 }