我正在重构一个Angular应用程序,当我将组件移动到新的目录位置时,发现在组件的SCSS文件中处理@import
路径有些繁琐。
例如,假设我在应用程序的根目录下有文件src/_mixins.scss
,而组件src/app/my-widget/my-widget.component.scss
像这样导入SCSS:@import '../../mixins';
。一切都好。
但是然后我决定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'
。
注意:这只是一个简化的例子。其中一些路径相对较深(无意冒犯...或者是有意的?),所有这些.
和/
有点多。
简而言之:
如果从一开始,我就可以在所有组件的SCSS文件中相对于根目录导入_mixins.scss
,那将非常方便,这样我就不必在重构时不断调整@import
路径了。(例如:@import '~/mixins'
之类的)。是否存在这样的功能?
我尝试过的方法(可悲地失败了):
@import '~/mixins'; /** 我本来很有希望的 **/
@import 'mixins'; /** 这里可能有点过于乐观了 **/
@import '~//mixins'; /** 现在我只是胡编乱造了 **/
npm test
时遇到了问题。结果发现angular.json
中的“test.options”部分也需要stylePreprocessorOptions
! - Boris Yakubchik@import "@import "~mapbox-gl/dist/mapbox-gl.css
,它指向安装在node_modules/mapbox-gl/...
中的第三方MapBox库CSS - 如何使其指向我安装库的应用程序的正确方向,而不是https://localhost:4200/~/mapbox-gl/...
? - Alexander