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

Question

Hi we are currently trying to update a Angular 6 application to Angular 7. But we have one issue. In Angular 6 building using "ng build". Inlines the svg in the css file like this:

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

}

But after upgarding to Angular 7 the svg is moved to the dest folder and the path is set like this:

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

Other assets are not set to this. Our solution has an other structure so we need to either have it as the it was in Angular 6, or not have the cli move copy and change the paths of the svg files inn our css.

So is there a setting in the cli to turn off handling of svg files, so we can you the relative paths we use for other assets in the solution?

[edit] I found that the code that sets the paths are not the the file-loader as I thought originally. I tried updating i using the ngx-build-plus , witch is a tool that makes it possible to override the webpack settings in Angular.

After some digging into the cli code i found the postcssPluginCreator returns a PostcssCliResources plugin, that takes an filename in, here I could change the generated paths. I tried to use the [path] to get the real paths, but that never finished building. But I could set something else there like filename: test/[name].[ext] and it worked.

This was a little to hacky for us to use as I had to override/create the postcssPluginCreator function and make webpack use that.

We ended up setting the target folder of the cli to match the route name of the mvc page.

I hope the angular cli team at least enables us to add the path part as an setting in the angular.json file.

The code not to use, but shows what I tried:

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

An update to the issue https://github.com/angular/angular-cli/issues/6315 . Linked to a change where they have added a new option called "resourcesOutputPath". That adds a path to the resources so that all resources are put into a sub path/folder. You can't get the same as with the file-loader in webpack with the [path] flag, but at least one can separate the source code and resources.

To use it I had to update my cli version to 7.2.3 (i also updated the scheatics-cli to 0.12.3 but don't know if that is needed to)

Here is an example of how to use it:

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