相对于根目录的 SCSS 导入

Posted 2023-02-22

【中文标题】相对于根目录的 SCSS 导入

【英文标题】：SCSS Import Relative to Root

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

【参考方案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"
            ]
        ,
        ...
    ]

如果您使用服务器端渲染，请记住为 s-s-r 和主应用程序构建添加此内容 - 否则您将获得 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": "s-s-r",
            "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 文件，