En está lección vamos a mover el código CSS a los componentes de Vue, con el objetivo de que nuestros estilos sean modulares. Además de ello, también vamos a refactorizar nuestro CSS y lo separaremos en sus respectivos componentes dentro de los archivos .vue.
Notas
Los estilos los añadimos dentro de la etiqueta <style> en App.vue.
Dentro nuestros componentes solo deberíamos colocar los estilos que correspondan a dicho componente. Por ejemplo, en App.vue solo colocamos el CSS correspondiente a este componente.
Separar el CSS en cada componente nos va a permitir ordenar los estilos de una forma más lógica y gracias a Hot Module Replacement (HMR) también podremos ver los resultados inmediatamente en el navegador.
Al trabajar de esta forma podemos dividir cada una de las partes de nuestra página en componentes. Por ejemplo el <header> puede ser un componente y el <footer> otro. Esto nos permitirá separar no solo sus plantillas y el comportamiento sino también los estilos CSS y de esta forma organizar mejor el código. En esta aplicación tan pequeña no hace falta hacer esto (al menos no aún, pero ¿Por qué no lo intentas como un ejercicio?)
Recuerda que en la terminal desde donde ejecutamos webpack obtendremos feedback en caso de cometer un error.
El archivo style.css puede ser eliminado debido a que ya no será usado.
En el inspector de elementos del navegador podemos ver cómo al trabajar con css-loader y style-loader los estilos de nuestros componentes se cargan en línea dentro del HTML de la aplicación (más adelante repasaremos esto y veremos cómo extraer el CSS).
Todo el código de JavaScript y CSS ahora mismo se «compila» al archivo build.js al momento de ejecutar npm run build.
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
Lección anterior Cómo separar un módulo de Vue en componentes con webpack y vue-loader Lección siguiente Modularizar los estilos de los componentes de Vue con scoped y CSS modules