你好,我们目前正在尝试将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 }),
];
};