Привет, мы сейчас пытаемся обновить приложение 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, либо не иметь копию перемещения и изменять пути файлов svg в нашей css.
Так что естьустановка в cli, чтобы отключить обработку файлов SVG, чтобы мы могли указать относительные пути, которые мы используем для других ресурсов в решении?
[править] Я обнаружил, что код, который устанавливает пути, не является загрузчиком файлов, как я думал изначально.Я попытался обновить i, используя ngx-build-plus , ведь это инструмент, позволяющий переопределить настройки веб-пакета в Angular.
После того, как я покопался в коде cli, я обнаружил, что postcssPluginCreator возвращает плагин PostcssCliResources, который принимает имя файла, здесь я могу изменить сгенерированные пути.Я пытался использовать [путь], чтобы получить реальные пути, но это так и не закончилось.Но я мог бы установить что-то еще, например, имя файла: test/[name].[ext], и это сработало.
Это было немного странно для нас, так как мне пришлось переопределить / создать функцию postcssPluginCreator и заставить ее использовать веб-пакет.
В итоге мы настроили целевую папку 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 }),
];
};