Después de actualizar un proyecto de Angular 12 a Angular 13, encontré un problema en el que SCSS ya no podía ubicar una hoja de estilo compartida en una biblioteca. Parece que esa Tilde (~) ya no se resuelve en node_modules.
Roto: @use '~my-angular-lib' as lib;
Funciona: @use '../node_modules/my-angular-lib' as lib;
Noté que el material angular solo hace referencia directa a '@angular/material' a partir de Angular 13, pero no puedo entender cómo hacer que funcione con mi biblioteca. Parece un poco complicado usar una ruta relativa a mode_modules cada vez.
¿Cuál es el mejor método actual para hacer referencia a una hoja de estilo en node_modules, o qué me falta donde ~ ya no apunta a node_modules?
Angular ha estado desaprobando el uso de ~ para declaraciones Sass @use y @import por un tiempo.
Oficialmente, a partir de la versión 13 de Angular, ya no se admitirá el uso de importaciones de tilde .
Para usar @use 'my-angular-lib' as lib; debe asegurarse de exportar los archivos relevantes en los archivos de bibliotecas angulares package.json y ng-package.json (consulte https://github.com/ng-packagr/ng-packagr/blob/master/docs/copy- activos.md ).
Aquí mi configuración por ejemplo:
// package.json ..., "exports": { ".": { "sass": "./src/lib/_index.scss" } }, ... // ng-package.json ..., "assets": [ "./src/lib/_index.scss", "./**/*-theme.scss" ], ... Todos mis archivos de componentes relacionados con el tema tienen el sufijo -theme y tengo un archivo scss ( _index.scss ) que contiene solo un @mixin para @include estilos de componentes específicos del tema. Por ejemplo:
// src/lib/_index.scss @use './some/some-component-theme' as *; @mixin lib-theme($theme) { @include some-component-theme($theme); } Sugerencia : a veces tuve que eliminar manualmente la carpeta .angular/cache cuando trabajaba con bibliotecas locales. Así que intente esto si sucede algo extraño durante el proceso de construcción.