相对于根目录的 SCSS 导入答案

【问题标题】：SCSS Import Relative to Root相对于根目录的 SCSS 导入
【发布时间】：2017-08-09 11:51:03
【问题描述】：

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

例如，假设我的应用程序根目录中有文件src/_mixins.scss，组件src/app/my-widget/my-widget.component.scss 像@import '../../mixins'; 一样导入SCSS。一切顺利。

但后来我决定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'。

注意：这是一个简化的示例。一些路径变得相对较深（不是双关语......或者是吗？）所有这些. 和/ 有点多。

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 文件以指向带有所有这些“移动的东西”的组件的新路径，但是......嘿，少一件事，对吗？

【问题讨论】：

标签： angular sass webpack angular-cli

【解决方案1】：

如果您使用的是 Angular CLI，请查看Global styles、"stylePreprocessorOptions" 选项。
对于webpack，你可以在sassLoader插件配置中配置includePaths。
gulp 构建也是如此，您将 includePaths 传递给 sass 插件。

无论您的构建工具是什么，sass 都会将这些路径视为根路径，因此您可以直接导入它们，因此：

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！
谢谢鲍里斯，我也遇到了同样的问题！

【解决方案2】：

在使用meteor-scss 时，您可以使用{} 来引用项目路径的顶层，因此类似的方法会起作用。

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

您还可以使用 tilda 运算符 ~ 如果使用 webpack（或 angular-cli），则按照以下方式访问 node_modules 下的库 -- 感谢 @splintor

@import "~module-name/stylesheet";

【讨论】：

如果使用 webpack（或 angular-cli），访问node_modules 下的库也可以使用波浪号运算符 - @import "~module-name/stylesheet";
@Jessycormier 如答案{} 中所述，代表项目根目录。因此，从根目录（绝对引用）引用文件可能比从文件位置（例如通过../../）的相对引用更容易
Angular 的 webpack 配置和 Jetbrains 的 sass 工具都不知道如何用这种语法解决任何问题。
以上引用使用meteor-scss

【解决方案3】：

angular-cli 的解决方案是将stylePreprocessorOptions 添加到.angular-cli.json。

{
    "apps": [{
        ...
        "stylePreprocessorOptions": {
            "includePaths": [
                "./app/global-styles"
            ]
        },
        ...
    }]
}

如果您使用服务器端渲染，请记住为 ssr 和主应用程序构建添加此内容 - 否则您将获得 NodeInvocationException: Prerendering failed because of error: Error: Cannot find module 'C:\Users\...\ClientApp\dist-server\main.bundle.js'

{
    "apps": [{
            ...
            "outDir": "dist",
            "stylePreprocessorOptions": {
                "includePaths": [
                    "./app/global-styles"
                ]
            },
            ...
        },
        {
            ...
            "name": "ssr",
            "outDir": "dist-server",
            "stylePreprocessorOptions": {
                "includePaths": [
                    "./app/global-styles"
                ]
            },
            ...
        }
    ]
}

【讨论】：

【解决方案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"
    ]
 }

【讨论】：

我可以补充一点，如果您使用预处理器路径，那么您不应该在导入中使用波浪号。我很难学会这一点。

【解决方案5】：

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

例如

@import 'src/mixins';

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

（这是在 Angular 9 上测试的）

【讨论】：

【解决方案6】：

对我有用的是

/* file src/assets/scss/app.scss */

@import "src/assets/css/style";

删除了文件名末尾的“.css”，
从“src/assets/...”导入（无反斜杠）

这从 Angular 11 + Webpack 中的 .scss 导入了一个 .css 文件，

【讨论】：