Angular7、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');

其他资产没有设置到这个。我们的解决方案具有其他结构，因此我们需要像在 Angular 6 中那样使用它，或者不使用 cli 移动复制并更改 css.[= 中的 svg 文件的路径。 17=]

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

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

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

这对我们来说有点难用，因为我必须 override/create 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 (but it is still not clear to me why was that bad, this is why I asked a question in https://github.com/angular/angular-cli/issues/6315，您可以评论和订阅）。

Answer 2

问题 https://github.com/angular/angular-cli/issues/6315 的更新。链接到他们添加了一个名为 "resourcesOutputPath" 的新选项的更改。这为资源添加了一条路径，以便所有资源都放入一个子 path/folder 中。你不能像 webpack 中的 file-loader 一样带 [path] 标志，但至少可以将源代码和资源分开。

要使用它，我必须将我的 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",
...

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

Angular 7, svg and sass how to set relative path

svg

sass

angular

angular7