Soy nuevo en Angular 4 y en Angular-CLI. No puedo encontrar ninguna solución sobre cómo usar los archivos root scss/css para toda la aplicación. Por lo tanto, mi pregunta, ¿cómo usar archivos scss globales en el proyecto?
Cree una carpeta de styles en la carpeta src , luego puede importar todo allí en styles.scss que también está en la carpeta src . Así es como se ve el mío:
// Vendors @import './styles/vendors/_exports'; // Utils @import './styles/utils/_exports'; // Globals @import './styles/globals/_exports'; // Partials @import './styles/partials/_exports'; // Components @import './styles/components/_exports'; Cada archivo _exports importa todos los archivos en la carpeta en particular para que sea más fácil importarlo al archivo styles.scss .
Espero que esto ayude.
EDITAR:
Como se indica en los comentarios, asegúrese de que styles.scss se agregue a los styles en el archivo angular-cli.json o no funcionará.
Deberá agregar el siguiente código angular-cli.json (angular.json en A6+)
"stylePreprocessorOptions": { "includePaths": [ "../src/assets/scss/base" ] }, Donde base es la carpeta que contiene los archivos que desea @import .
Entonces puedes simplemente
// BEFORE @import '../../100TIMES/variables'; // NOW @import 'variables'; // src/assets/scss/base/_variables.scssGracias.
Nota: NECESITA RECONSTRUIR EL PROYECTO PARA RECARGAR angular-cli.json (angular.json en A6+)
También existe la opción de agregar su archivo css/scss a la matriz de "estilos" en el archivo .angular-cli.json. Puede haber una "mejor práctica" que se rompa al hacer esto; no estoy muy seguro de las reglas. Pero si incluye un archivo en esa matriz, se inyectará como si estuviera cargado en la parte superior de index.html.
Aquí hay un ejemplo de uno de mis proyectos: (/.angular-cli.json) ... "styles": [ "styles.scss", "../node_modules/font-awesome/scss/font-awesome.scss ", "../node_modules/mdi/scss/materialdesignicons.scss" ], ...