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

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

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

hope你还和我在一起.所以,现在我有src/app/my-thingy/shared/my-widget个,我修改了我的SCSS文件以导入@import '../../../../mixins'.

Note:这是一个简化的例子.有些路径变得相对较深(没有双关语…or was it?),所有这些./都有点多.

TL;DR

如果从一开始我就可以在所有组件的SCSS文件中导入相对于根目录的_mixins.scss条路径,这样我就不必在重构时不断弄乱@import条路径,那么这将是super-handy条.(例如,类似于@import '~/mixins'的东西).Does something like this exist?

我try 过的(遗憾的是,失败了):

  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 **/

I understand that I'm already going to have to modify my mod files to point to the new path of the component with all of this "moving stuff around", but... hey, one less thing, right?

推荐答案

  • 如果您使用的是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'.

Angular相关问答推荐

使Angular 效果只执行一次

从Observatory的订阅方法外正确接收JSON数据

无法绑定到appendTo,因为它不是p-confirmPopup的已知属性

对子router-outlet 应用主机样式

使选项卡与父零部件成一定Angular 激活

当可观察到的更改时,异步管道不更新视图

将ngModel绑定到@Input属性是不是一种糟糕的做法?

无法在 app.component.html 中呈现自定义组件

如果observableA在1秒前触发,则过滤掉observableB

在生产模式下使用带Angular 的 livekit

角 12 固态继电器 |页眉页脚在加载程序到来之前显示

在父组件的子组件中使用 ng-template

如何将我的数组数据转换为逗号分隔的字符串

Angular:try 在点击次数后禁用按钮

在更改检测之前调用创建的间谍

如何在Angular 4中为数字管道指定语言环境千位分隔符

Angular2延迟加载模块错误'找不到模块'

无法绑定到 target,因为它不是div的已知属性

如何使用 @ngrx/store 获取 State 对象的当前值?

在 Angular 2 中对 observable 进行单元测试