Angular 7，SVG和SASS如何设置相对路径 [英] Angular 7, svg and sass how to set relative path

问题描述

您好，我们目前正在尝试将Angular 6应用程序更新为Angular7.但是我们有一个问题.在Angular 6中使用"ng build"进行构建.像这样在css文件中内联svg:

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>...');

}

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

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

其他资产未设置为此.我们的解决方案具有其他结构，因此我们需要像Angular 6中那样拥有它，或者没有cli move副本并在CSS中更改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.

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

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?

我发现设置路径的代码不是我最初认为的文件加载器.我尝试使用 ngx-build-plus 更新我的女巫，可以覆盖Angular中的webpack设置.

[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.

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

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.

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

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

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

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

我希望angular cli团队至少能够使我们将path部分作为设置添加到angular.json文件中.

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

推荐答案

看起来像是设计使然:> https://github.com/angular/angular-cli/issues中问了一个问题/6315 ，您可以发表评论并订阅).

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).

这篇关于Angular 7，SVG和SASS如何设置相对路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！