Question

您好，我们目前正在尝试将Angular 6应用程序更新为Angular7。但是我们有一个问题。在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');

其他资产未设置为此。我们的解决方案具有其他结构，因此我们需要像Angular 6中那样拥有它，或者没有cli move副本并更改CSS中svg文件的路径。

那么cli中是否有设置可以关闭对svg文件的处理，所以我们可以在解决方案中使用其他资源的相对路径吗？

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

深入研究cli代码后，我发现postcssPluginCreator返回一个PostcssCliResources插件，该插件接受文件名，在这里我可以更改生成的路径。我试图使用[path]来获取真实的路径，但是那还没完成。但我可以在其中设置其他名称，例如文件名：test/[name].[ext]，它可以正常工作。

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

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

我希望angular cli团队至少能够使我们将path部分作为设置添加到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中问了一个问题，您可以发表评论并订阅）。

Answer 2

问题https://github.com/angular/angular-cli/issues/6315的更新。链接到他们添加了名为“ resourcesOutputPath”的新选项的更改。这就为资源添加了一条路径，以便将所有资源放入子路径/文件夹中。使用[path]标志无法获得与webpack中的文件加载器相同的功能，但是至少可以将源代码和资源分开。

要使用它，我必须将cli版本更新为7.2.3（我也将scheatics-cli更新为0.12.3，但不知道是否需要这样做）

以下是使用方法的示例：

 "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "Scripts/clidest",
        "index": "app/index.html",
        "main": "app/startUp.ts",
        "tsConfig": "app/tsconfig.app.json",
        "polyfills": "app/polyfills.ts",
        "resourcesOutputPath": "resources",
...

Angular 7，SVG和SASS如何设置相对路径

2 个答案: