Angular 7, svg and sass how to set relative path

问题

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 }),
     ];
   };

回答1:

Looks like this is by design: 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, you can comment and subscribe).

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

来源：https://stackoverflow.com/questions/53590073/angular-7-svg-and-sass-how-to-set-relative-path

标签

angular

svg

Sass

angular7