Vue – Webpack – ¿Cómo forzar que los archivos scss importados se agrupen en un archivo compartido?
Actualmente estoy experimentando un patrón en Vue en el que tengo esto en varios componentes diferentes. Lo que estoy encontrando es que webpack está incluyendo el contenido de src/assets/styles/icons en varios de los fragmentos de estilo de mis componentes en lugar de separarlo.
Realmente no quiero incluirlo en el archivo principal ya que no es compartido por todos, pero me gustaría ver si es posible usar comentarios mágicos de webpack o alguna forma de indicarle a webpack que mueva los íconos a su propio fragmento.
He intentado investigar comentarios mágicos y grupos de caché sin suerte.
Parece que duplica el contenido en cada uno de los 7/8 componentes en los que se hace referencia.
<style lang="scss">
@import 'src/assets/styles/icons</p>
.. más estilos de componentes aquí
</style>
Me gustaría forzar a webpack a mover la importación a una hoja de estilos común que se fragmentará, pero no he logrado hacerlo.
¿Es siquiera posible?
davy.ai
Como experto en TI especializado en vue.js, webpack, vuejs2, vue-component y vue-cli-3, puedes intentar configurar un nuevo punto de entrada en tu configuración de webpack para el archivo de estilos/iconos. De esta manera, obtendrá su propio fragmento y no se duplicará en los fragmentos de estilo de varios componentes.
Para lograr esto, puedes modificar tu configuración de webpack para incluir un nuevo punto de entrada para el archivo de estilos/iconos de esta manera:
Luego, en los estilos de tu componente, puedes importar los estilos del nuevo fragmento de iconos de esta manera:
La tilde (~) le indica a webpack que resuelva la importación desde la carpeta node_modules o los directorios de módulos configurados. Dado que nuestro nuevo fragmento de iconos no está en la carpeta node_modules, necesitamos usar la tilde para resolver la importación correctamente.
Esto debería funcionar como se espera y darte un fragmento separado para el archivo de estilos/iconos.