Angular 7、svg 和 sass 如何设置相对路径

Question

您好，我们目前正在尝试将 Angular 6 应用程序更新到 Angular 7。但我们遇到了一个问题。在 Angular 6 建筑中使用“ng build”。像这样在 css 文件中内联 svg:

    background: url('data:image/svg+xml,<%3Fxml version%3D"1.0" encoding%3D"utf-8"%3F>...');

但是在升级到 Angular 7 之后，svg 被移动到 dest 文件夹并且路径设置如下:

    background-image: url('zoom-in.svg');

其他 Assets 不设置为这个。我们的解决方案具有其他结构，因此我们需要像在 Angular 6 中一样使用它，或者不使用 cli 移动副本并更改我们的 css 中 svg 文件的路径。

那么在 cli 中是否有一个设置来关闭对 ​​svg 文件的处理，所以我们可以为您提供我们用于解决方案中其他 Assets 的相对路径？

[编辑]我发现设置路径的代码并不是我最初认为的文件加载器。我尝试使用 ngx-build-plus 更新 i , witch 是一个可以覆盖 Angular 中的 webpack 设置的工具。

在深入研究 cli 代码后，我发现 postcssPluginCreator 返回一个 PostcssCliResources 插件，它接受一个文件名，在这里我可以更改生成的路径。我尝试使用 [path] 来获取真实路径，但从未完成构建。但是我可以在那里设置其他东西，比如 filename: test/[name].[ext] 并且它起作用了。

这对我们来说有点难用，因为我必须重写/创建 postcssPluginCreator 函数并让 webpack 使用它。

我们最终设置了 cli 的目标文件夹以匹配 mvc 页面的路由名称。

我希望 angular cli 团队至少能让我们在 angular.json 文件中添加路径部分作为设置。

代码未使用，但显示了我尝试过的内容:

import {
     PostcssCliResources,
     RawCssLoader,
     RemoveHashPlugin,
     SuppressExtractedTextChunksWebpackPlugin,
   } from "../node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/webpack.js";

const postcssPluginCreator = function (loader: any) {
     return [
       postcssImports({
         resolve: (url: string) => url.startsWith('~') ? url.substr(1) : url,
         load: (filename: string) => {
           return new Promise<string>((resolve, reject) => {
             loader.fs.readFile(filename, (err: Error, data: any) => {
               if (err) {
                 reject(err);
                 return;
               }

               const content = data.toString();
               resolve(content);
             });
           });
         },
       }),
       PostcssCliResources({
         baseHref:'',
         deployUrl:'',
         loader,
         filename: `test/[name].[ext]`, // here is the path set.
       }),
       autoprefixer({ grid: true }),
     ];
   };

Answer 1

看起来这是设计使然:https://github.com/angular/angular-cli/issues/12731#issuecomment-432621166 (但我仍然不清楚为什么那么糟糕，这就是为什么我在 https://github.com/angular/angular-cli/issues/6315 中提出了一个问题，您可以发表评论并订阅)。