from - Ionic3: la mejor manera de importar css desde node_modules

ionic import css

Question

Estoy intentando importar el archivo .css del paquete de full-calendar .

Primero, creé un nuevo componente my-calendar (html, scss, ts).

Luego, probé 3 formas diferentes, pero solo la última funcionó para mí:

1. Haga referencia al archivo directamente, como se sugiere en la documentación, en el index.html (no funciona porque la referencia a node_modules se pierde cuando construye el proyecto)

   <link href="node_modules/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet">

2. Agregando @import "~fullcalendar/dist/fullcalendar.min.css"; en mi-calendar.scss . Si no estoy equivocado, esto debería agregar el estilo a main.css cuando el proyecto se está construyendo (no está funcionando)

3. Crear configuración de copia personalizada (copy.config.js)

   module.exports = {   
     ...   
     copyFullCalendar: {    
       src: [''{{ROOT}}/node_modules/fullcalendar/dist/fullcalendar.min.css''],    
       dest: ''{{BUILD}}''    
     }
   }

   y agregar @import "fullcalendar.min.css" ; en mi-calendar.scss

ACTUALIZAR:
y añadiendo @import "fullcalendar"; en mi-calendar.scss
para evitar errores de compilación cuando se utiliza la compilación iónica --aot --minifycss --minifyjs

Apreciaría si alguien pudiera aclarar la mejor manera y explicarme si entendí mal algún concepto.

PD: recuerde que estoy trabajando con Ionic3 y no estoy usando la CLI angular.

Answer 1

A partir de @ ionic / app-scripts: 3.2.0, parece que todavía necesitarás @include FILE; En algún lugar, vea este tema cerrado en la aplicación github

Encontré que a partir de ''Ionic Framework: ionic-angular 3.9.2'' tiene dos opciones para insertar su importación en src / theme / variables.scss o src / app / app.scss.

Por ejemplo en variables.scss

/* some declarations here */
@import ''insrctest'';/*file sits in src/test/insrctest.scss*/

Y en mi custom.config.js

includePaths: [
''node_modules/ionic-angular/themes'',
''node_modules/ionicons/dist/scss'',
''node_modules/ionic-angular/fonts'',
''./src/test'', /* when the import above gets called, node-sass will look in here */

Answer 2

El tercer método tuyo será la mejor forma de implementar, pero se puede hacer de otra manera más parecida a la iónica. includePaths utilizar las includePaths al configurar la ruta personalizada, ya que estamos tratando con css personalizados, agregue sass.config.js a la carpeta del proyecto local donde configuramos las includePaths personalizadas como esta

includePaths: [
    ....
    ''node_modules/ap-angular2-fullcalendar''
 ],

En las secuencias de comandos package.json para incluir un archivo de configuración css personalizado, como este:

"scripts": {
    .....
    "ionic:serve": "ionic-app-scripts serve -s ./config/sass.config.js"
 },

El único problema con esta implementación es que cuando actualiza ionic-app-scripts debe comparar el archivo sass.config.js nativo con el archivo local y verificar si hay sass.config.js cambio.

Este es un método problemático y se planteó un problema en Github pero desafortunadamente se cerró el problema con la siguiente justificación

Las configuraciones están extendidas, así que solo incluye los campos que estás cambiando. Todo lo demás heredará los valores por defecto.