相对于根的 SCSS 导入 [英] SCSS Import Relative to Root

问题描述

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

I'm in the process refactoring an Angular application and as I'm moving components around to new directory locations, I'm finding that dealing @import paths in the components' SCSS files is getting a bit tedious.

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

For example, let's say I have the file src/_mixins.scss in the root of my application and the component src/app/my-widget/my-widget.component.scss imports the SCSS like so @import '../../mixins';. All well and good.

但后来我决定 my-widget.component 实际上是另一个组件 my-thingy.component 下的共享组件"，所以我创建了一个 src/app/my-thingy 下的 >shared 文件夹并将 src/app/my-widget 中的所有内容移动到其中.

But then I decide that my-widget.component is really be a "shared component" under another component my-thingy.component, so I create a shared folder under src/app/my-thingy and move everything that was in src/app/my-widget into it.

我希望你仍然和我在一起...所以，现在我有 src/app/my-thingy/shared/my-widget 和我修改我的 SCSS 文件以导入 @import '../../../../mixins'.

I hope you're still with me... So, now I've got src/app/my-thingy/shared/my-widget and I modify my SCSS file to import @import '../../../../mixins'.

注意:这是一个简化的例子.一些路径变得相对较深(没有双关语......或者是?)并且所有这些 . 和 / 都有点很多.

Note: This is a simplified example. Some of the paths get relatively deep (no pun intended... or was it?) and all of these . and / are a bit much.

TL;DR

如果从一开始我就可以相对于所有组件的 SCSS 文件中的根目录导入 _mixins.scss，那将是超级方便重构时不必一直搞乱 @import 路径.(例如，类似于 @import '~/mixins' 的内容).这样的东西存在吗?

It would be super-handy if from the start I could have just imported _mixins.scss relative to the root in all of my components' SCSS files so I don't have to keep messing with the @import paths when refactoring. (e.g. Something along the lines of @import '~/mixins'). Does something like this exist?

我尝试过的(遗憾的是，失败了):

What I've tried (and, sadly, has failed):

1. @import '~/mixins';/** 我对这个真的抱有希望 **/
2. @import 'mixins';/** 只是在这里过于乐观 **/
3. @import '~//mixins';/** 现在我只是在编造东西 **/

我知道我已经将不得不修改我的 mod 文件以指向组件的新路径，所有这些移动的东西"，但是......嘿，少一件事，对吗?

推荐答案

• 如果您使用的是 Angular CLI，请查看全局样式, stylePreprocessorOptions" 选项.
• 对于 webpack，您可以在 sassLoader 插件配置中配置 includePaths.
• 它与 gulp 构建类似，您将 includePaths 传递给 sass 插件.
• If you are using Angular CLI, take a look at Global styles, "stylePreprocessorOptions" option specifically.
• For webpack, you can configure includePaths in sassLoader plugin configuration.
• And it's similar for gulp builds, you pass includePaths to the sass plugin.

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

Whatever your build tool is, sass will treat those paths as root, so you can import them directly, so with:

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

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

you can just @import 'styles' instead of @import 'anywhere/on/my/disk/styles'.

这篇关于相对于根的 SCSS 导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！