Pregunta: En mi aplicación Angular2 (4.0), ¿cómo puedo importar hojas de estilo (css) desde un módulo en node_modules?
Tengo un módulo ubicado aquí:
node_modules/@swimlane/ngx-datatableQuiero importar esta hoja de estilo:
node_modules/@swimlane/ngx-datatable/release/index.cssHe intentado los siguientes enfoques , sin suerte:
En mi propio archivo scss de componentes:
@import '~@swimlane/ngx-datatable/release/index.css';En mi componente:
@Component({ encapsulation: ViewEncapsulation.None, selector: 'site_table', template: require('./site_table.html'), styleUrls: ['./site_table.scss', '@swimlane/ngx-datatable/release/index.css'] })Como ya está usando SCSS, en su ./site_table.scss impórtelo así
@import "~swimlane/ngx-datatable/release/index";Nota: no agregue la extensión.
Importará la hoja de estilo del paquete de nodos. Eso me sirvió bien, espero que te sirva a ti también. De esa manera, solo tiene que usar una sola hoja de estilo en su componente y se verá más limpio.
Si está utilizando el nuevo angular-cli con el archivo angular.json y no el paquete web, la tilde (~) en la respuesta de @sickelap probablemente no funcione para usted.
En cambio, lo que puede hacer es agregar esto en su archivo angular.json: -
... "styles": [ ... ], "stylePreprocessorOptions": { "includePaths": [ "node_modules/@swimlane" ] }, ...Luego, en el archivo .scss de su componente, inserte esto:
@import "ngx-datatable/release/index";
Tenga en cuenta que no se requiere la extensión .css .
Pruébalo con una URL relativa completa:
@Component({ encapsulation: ViewEncapsulation.None, selector: 'site_table', template: require('./site_table.html'), styleUrls: [ './site_table.scss', '../../node_modules/@swimlane/ngx-datatable/release/index.css' ] })No probé su notación, pero la resolución del paquete de nodos podría no funcionar sin el paquete web. Yo podría, sin embargo, estar equivocado.