0

El problema:

En los componentes de vue-cli se encuentra la etiqueta <style lang="scss">. Esta se encarga de tomar todo lo que encierra y compilarlo a CSS mediante Webpack. Cuando el código en su interior es compilado, lo genera en una etiqueta <style> dentro del archivo HTML (en realidad lo genera en build.js, pero ya en el navegador queda como he dicho)...

Quisiera que en vez de compilarse dentro del HTML en la etiqueta <style> me lo compile en un archivo externo, como por ejemplo un build.css.

4
  • Y porque querrias hacer eso? tal vez podrias explicar la idea detras de esto?
    – gbianchi
    Commented el 11 oct. 2018 a las 19:47
  • La idea es no llenar todo el archivo HTML con los estilos de los componentes, ya que si tengo muchos se extenderá el HTML... Pienso en el rendimiento, o ¿crees que no afecte en nada? Commented el 11 oct. 2018 a las 19:51
  • no deberia. Los archivos estan minimizados por el compilador, y ademas no importa si el archivo es largo o son muchos archivos, ya que los necesita todos y los tiene que bajar todos. Y una app vue baja en general un solo archivo js que contiene todo lo que necesita.
    – gbianchi
    Commented el 11 oct. 2018 a las 19:52
  • Vale, te entiendo. Muchas gracias Commented el 11 oct. 2018 a las 19:54

1 respuesta 1

2

Puedes segmentar tu estilo css en varios archivos directamente.

Por ejemplo, en el archivo app.vue ( o como se llame su .vue inicial ) puede añadir lo siguiente:

<style lang="scss">
  @import './styles/build.css';
  // or
  @import './styles/build.scss';
</style>

Ahora en el directorio styles, el archivo build será importado:

.example1 {

}

.example2 {

}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.