Angular 7、SVG和Sass如何设置相对路径

3

你好,我们目前正在尝试将Angular 6应用程序更新到Angular 7。但是我们有一个问题。在Angular 6中使用"ng build"构建时,将svg内联到css文件中,就像这样:

    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文件的路径。
那么,在cli中是否有一个设置可以关闭处理svg文件的功能,以便我们可以使用解决方案中用于其他资产的相对路径?
[编辑] 我发现设置路径的代码不是我最初认为的file-loader。我尝试使用ngx-build-plus进行更新,它是一种工具,可以在Angular中覆盖webpack设置。
在研究了一些cli代码后,我发现postcssPluginCreator返回一个PostcssCliResources插件,该插件接受一个文件名,我可以在这里更改生成的路径。我尝试使用[path]来获取真实路径,但是构建从未完成过。但我可以在那里设置其他内容,例如filename:test / [name] . [ext] ,它可以工作。
这对我们来说有点hacky,因为我必须覆盖/创建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 }),
     ];
   };

1
put it in assets folder. - rijin
@rijin,解决方案不仅仅涉及一个页面,因此已经在Angular领域之外使用了一种结构。所以我们希望自己处理路径,否则就必须改变许多CSS文件。原本它是一个AngularJs解决方案,其中包含一些不属于Angular的ASP.net视图。 - Gaotter
我也遇到了同样的问题,包括 PNG 资源(之前打包进 CSS 中)。 - Nixie
2个回答

2

1

关于https://github.com/angular/angular-cli/issues/6315的更新。他们添加了一个名为"resourcesOutputPath"的新选项,该选项将资源放入子路径/文件夹中。虽然无法像webpack的[file-loader]标志一样获取相同的内容,但至少可以将源代码和资源分开。

要使用它,我必须将我的cli版本更新到7.2.3(我也更新了0.12.3的scheatics-cli,但不知道是否需要)

以下是如何使用它的示例:

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接