change - webpack 3 angular 2

Angular-cli Webpack 3rd part archivos css

Question

Me acabo de mudar a angular-cli 1.0.0-beta.11-webpack.2
Hay tantas cosas molestas, pero el mayor problema al que me enfrento es con archivos css externos (probablemente también tendré el problema con los archivos js ).

En mi proyecto se utiliza material Angular2 y el menu component requiere overlay.css . Cuando lo index.html en index.html :

<link href="vendor/@angular2-material/core/overlay/overlay.css" rel="stylesheet">

Y después de ng serve or ng build la superposición de archivos css falta en la carpeta dist .

Existe un problema en angular-cli github . Hice todo exactamente cómo se menciona, pero todavía no está funcionando.

Creé una carpeta de assets y styles.css archivo de styles.css en

• src
• src / app

y mis archivos angular-cli.json ven así:

{
  "project": {
    "version": "1.0.0-beta.11-webpack.2",
    "name": "cli-webstorm"
  },
  "apps": [
    {
      "root":"src",
      "assets":"assets",
      "main": "src/main.ts",
      "tsconfig": "src/tsconfig.json",
      "mobile": false,
      "styles": "styles.css",
      "environments": {
        "source": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "dev": "environments/environment.dev.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "config/protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "config/karma.conf.js"
    }
  },
  "defaults": {
    "prefix": "app",
    "sourceDir": "src",
    "styleExt": "css",
    "prefixInterfaces": false,
    "lazyRoutePrefix": "+"
  }
}

Me gustaría preguntar cómo puedo incluir una biblioteca de archivos css (3ra parte css) en mi proyecto de una manera que pueda usar los beneficios del angular-cli webpack .

Answer 1

Tuve el mismo problema cuando quería importar PrimeNG de Primefaces Pero encontré un styles.scss en mi carpeta ...

@import ''./../your_file_path/your_file_name'';

Debería hacer el truco

Answer 2

No creo que deba incluir su archivo css en index.html en su lugar en sus archivos ts. Simplemente puede importar en su archivo CSS como este

import "yourcssfile.css"

si desea usarlos solo en componentes, entonces puede usar styleUrl

 styleUrls: [''yourfile.css'']

angular2 webpack seed con angular2material

Answer 3

Su respuesta se encuentra dentro de los nuevos ajustes de configuración de styles y scripts disponibles en angular-cli.json . Hay dos opciones para resolver la inyección de CSS:

Estilos externos

Opción 1

Simplemente incluya la ruta al archivo css directamente en la matriz de styles manera:

// - angular-cli.json - //

{
   //... 
 “apps”: [
   {
   //... 
   “styles”: [
     “styles.css”,
     “../node_modules/@angular2-material/core/overlay/overlay.css”
   ],
   “scripts”: [],

     // ...
    }
   }
 ], 

opcion 2

Puede importar overlay.css en el archivo src/styles.css generado por el cli:

/* scr/styles.css */

@import "../node_modules/@angular2-material/core/overlay/overlay.css";

Si usa la Opción 2, asegúrese de eliminar la referencia a overlay.css ilustrada en la Opción 1.

Nota: angular-cli.json es un archivo de configuración, por lo que deberá reiniciar el servidor cuando realice cambios en él.

Puede encontrar más detalles de angular-cli 1.0.0-beta.11-webpack.2 aquí .

Guiones externos

De forma similar a la inyección de estilos externos, puede inyectar scripts externos utilizando los scripts:[] array en angular-cli.json. Cualquier script agregado aquí será cargado en el objeto de la window . Esto es particularmente útil con los complementos que requieren que se acceda a jQuery desde el objeto de la window . Más sobre esto aquí .

"scripts": [
  "../node_modules/jquery/dist/jquery.js"
],

Answer 4

Si actualiza a 1.0.0-beta.11-webpack.3 o superior, puede usar las apps[0].styles propiedad de angular-cli.json para listar hojas de estilo externas para la importación.

Para actualizar desde 1.0.0-beta.11-webpack.2 , ejecute:

npm uninstall -g angular-cli
npm cache clean
npm install -g [email protected]

Nota: es posible que necesite Node.js 6 para obtener [email protected] funcionamiento si obtiene SyntaxError: Unexpected token ... errores al ejecutar la ng version . Ver https://github.com/angular/angular-cli/issues/1883 para más detalles.

Si genera un nuevo proyecto, su angular-cli.json debería tener un aspecto similar (tenga en cuenta la propiedad de styles ):

{
  "project": {
    "version": "1.0.0-beta.11-webpack.3",
    "name": "demo"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environments": {
        "source": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "dev": "environments/environment.dev.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "lazyRoutePrefix": "+"
  }
}

Answer 5

Funciona para mí, finalmente, en

[email protected]

y

[email protected]

... ambos se instalan localmente con

npm install --save-dev

La combinación de las Versiones correctas fue la clave para que funcione.

Answer 6

La página Angular CLI Wiki Stories tiene una sección de "Instalación de terceros" :

ng new my-todo-app
ng install sass

Además, consulte la sección Instalación de la biblioteca global del archivo Léame:

npm install bootstrap@next

A continuación, agregue los archivos de script necesarios a las aplicaciones de angular-cli.json apps[0].scripts :

"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/tether/dist/js/tether.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],

Finalmente agregue el Bootstrap CSS a la matriz de apps[0].styles :

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "styles.css"
],

Reinicie ng serve si lo está ejecutando, y Bootstrap 4 debería estar funcionando en su aplicación.