首页 文章

SCSS导入相对于Root

提问于
浏览 次
24

我将组件移动到新的目录位置，我发现在组件的SCSS文件中处理 @import 路径变得有点乏味 .

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

但后来我决定 my-widget.component 真的是"shared component"在另一个组件 my-thingy.component 下，所以我在 src/app/my-thingy 下创建一个 shared 文件夹并将 src/app/my-widget 中的所有内容移入其中 .

我希望你're still with me... So, now I'已经 src/app/my-thingy/shared/my-widget 我修改我的SCSS文件导入 @import '../../../../mixins' .

Note: 这是一个简化的例子 . 有些路径相对较深（没有双关语......或者是它？）所有这些 . 和 / 都有点多 .

TL;DR

如果从一开始我就可以在我的所有组件中相对于root导入 _mixins.scss ，这将非常方便' SCSS files so I don'在重构时必须继续弄乱 @import 路径 . （例如 @import '~/mixins' 的某些内容） . Does something like this exist?

我曾经尝试过（可悲的是，失败了）：

  • @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文件以指向所有这个"moving stuff around"的组件的新路径，但是......嘿，少一点，对吧？

angular sass webpack angular-cli

3 回答

  • 0

    • 如果您使用的是Angular CLI，请专门查看Global styles， "stylePreprocessorOptions" 选项 .

    • 对于webpack，您可以在sassLoader插件配置中配置 includePaths .

    • 和gulp构建类似，你将 includePaths 传递给sass插件 .

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

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

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

    回复于
  • 36

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

    @import "{}/node_modules/module-name/stylesheet";
    回复于
  • 6

    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"
                ]
            },
            ...
        }
    ]
}
    回复于

相关问题