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则像@import '../../mixins';那样导入SCSS.一切都很好.

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'; /** I had real hope for this one **/
2. @import 'mixins'; /** Just being overly optimistic here **/
3. @import '~//mixins'; /** Now I'm just making stuff up **/

1. @import '~/mixins'; /** I had real hope for this one **/
2. @import 'mixins'; /** Just being overly optimistic here **/
3. @import '~//mixins'; /** Now I'm just making stuff up **/

我知道我已经不得不修改我的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都将这些路径视为根路径，因此您可以直接将其导入，因此可以:

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'.

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