Skip to main content
Aviso eliminado Atraer atención por ComunidadBot
Recompensa finalizada sin una respuesta ganadora por ComunidadBot
etiquetas editadas
Enlace
FeRcHo
  • 644
  • 3
  • 18
  • 36
Aviso añadido Atraer atención por FeRcHo
Recompensa iniciada por un valor de 150 de reputación por FeRcHo
Origen Enlace
FeRcHo
  • 644
  • 3
  • 18
  • 36

Compilar módulos SCSS en componente VUE.JS

Tengo una plantilla modularizada que usa Sass-loader para compilar archivos scss que tiene cada componente, pero no he podido configurar webpack en laravel mix para que este funcione correctamente.

Estoy usando la versión(5.8) de laravel y Vue JS (2.5.17)

ejemplo de componente:

<template>
  <div :class="$style.logo">
    <div :class="$style.logoContainer">
      <img
        v-if="!settings.isMenuCollapsed || withDrawer"
        src="resources/images/logo-inverse.png"
        alt
      >
      <img
        v-if="settings.isMenuCollapsed && !withDrawer"
        src="resources/images/logo-inverse-mobile.png"
        alt
      >
    </div>
  </div>
</template>

<style lang="scss" module>
  @import "./style.module.scss";
</style>

Aquí hay un componente con su archivo style.scss que se compilará como módulo. Las clases aquí deben guardarse en $style.

Yo uso estos paquetes en package.json:

"sass": "^1.15.2",
"sass-loader": "^7.1.0"

y finalmente, mi archivo webpack.mix.js:

const mix = require('laravel-mix');
require('laravel-mix-alias');

mix.webpackConfig({
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: "sass-loader",
            options: {
                modules: true
            }
          }
        ]
      }
    ]
  }
});

mix.alias({
  '@': '/resources/js'
})

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

La cuestión es que las clases en los archivos de componentes scss no se compilan, y por eso, las etiquetas html después de la compilación no poseen estilos, perdiendo toda la estructura de mi plantilla.

Este tiene que ser el componente del archivo compilado:

<div class="index_logo_hObJ1">
  <div class="index_logoContainer_1zCMH">
    <img src="resources/images/logo-inverse.png" alt="">
  </div>
</div>

y esto es lo que obtengo:

<div>
  <div>
    <img src="resources/images/logo-inverse.png" alt="">
  </div>
</div>

Como puede ver, no se inyectaron clases en divs, y no obtengo errores al compilar, ¿qué estoy haciendo mal?