Question

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

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

然后我决定my-widget.component真的是一个＆＃34;共享组件＆＃34;在另一个组件my-thingy.component下，我在shared下创建了一个src/app/my-thingy文件夹，并将src/app/my-widget中的所有内容移入其中。

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

注意：这是一个简化的示例。有些路径相对较深（没有双关语...... 或者是它？），所有这些.和/都有点多。

TL; DR

如果从一开始我就可以将_mixins.scss相对于我所有组件中的根目录导入超级方便 SCSS文件所以我不必在重构时不断弄乱@import路径。（例如，@import '~/mixins'）的某些内容。 是否存在类似的内容？

我尝试过的（遗憾的是，失败了）：

@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文件以指向组件的新路径，所有这些＆＃34;移动东西＆＃34;，但..嘿，少一点，对吧？

Answer 1

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

Answer 2

如果我已正确理解问题，则可以正确使用from IPython.display import Image; Image("test_plot_.png")。

例如

@import 'src/app/...'

请注意，路径上没有反斜杠。

（已在Angular 9上进行了测试）

Answer 3

您还可以使用@import "{}/node_modules/module-name/stylesheet";来引用项目路径的顶层，因此类似的东西可以使用。

// wrapper
var myMap = function(target, zoom, center) {
  this.init(target, zoom, center);
};

myMap.prototype = {
  init: function(target, zoom, center) {
    // use actual ol
    return new ol.Map({
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      target: target,
      view: new ol.View({
        center: center,
        zoom: zoom
      })
    })
  }
};

// call your wrapper method
var map = new myMap("map", 2, [0, 0]);

Answer 4

确定的路径取决于您的Angular版本。在我们的项目中，旧版本使用angular-cli.json，而新版本使用angular.json然后：

在“ @ angular / cli”处：“〜1.7.4”在以下路径中使用angular-cli.json：

"stylePreprocessorOptions": {
    "includePaths": [
      "../src",
      "./scss"
    ]
  },

在“ @ angular / cli”处：“〜7.0.6”，请使用此：

"stylePreprocessorOptions": {
    "includePaths": [
       "./src",
       "./src/scss"
    ]
 }

Answer 5

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

Answer 6

对我有用的是

/* file src/assets/scss/app.scss */

@import "src/assets/css/style";

删除了文件名末尾的“.css”，
从“src/assets/...”导入（无反斜杠）

这从 Angular 11 + Webpack 中的 .scss 导入了一个 .css 文件，

SCSS导入相对于根

6 个答案: