5

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?

6
  • no veo donde podría estar el problema, pero hay un issue github.com/vuejs/vue-loader/issues/771 donde a su vez referencian la sección "migrando desde v14": vue-loader.vuejs.org/migrating.html#notable-breaking-changes
    – ffflabs
    Commented el 2 ene. 2020 a las 19:05
  • solo se me ocurre que el error esta en la configuración de módulos en webpack.mix.js
    – FeRcHo
    Commented el 2 ene. 2020 a las 20:15
  • Podrías probar algo como .sass('resources/sass/app.scss', 'public/css', {modules:true}) pero suena improbable
    – ffflabs
    Commented el 2 ene. 2020 a las 20:45
  • si, sin ninguna novedad!, tampoco pude encontrar nada de información respecto a este caso
    – FeRcHo
    Commented el 3 ene. 2020 a las 16:02
  • Ya instalaste node-sass? Commented el 4 ene. 2020 a las 18:38

3 respuestas 3

1

En tu archivo webpack.mix.js

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

//esto esta por defecto
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')

//esto lo haces para compilar archivos js
mix.scripts([
    'resources/carpetaJs/archivo.js'
], 'public/js/all.js');

//Esto es lo que necesitas, pues te explicare un poco y no sera necesario que lo llames en tus componentes
mix.styles([
    'resources/carpetaScss/archivo1.scss',
    'resources/carpetaCss/archivo2.css',
    'resources/carpetaLess/archivo3.less',
], 'public/css/all.css');

Agrega una carpeta para las buenas practicas, ahí dentro agrega tu archivo scss y escribe el código de arriba... Por último escribe: npm run watch o npm run dev Espero te sirva....

1
  • en realidad necesito compila estilos scss modulares
    – FeRcHo
    Commented el 6 ene. 2020 a las 13:02
1

Prueba a extraerlo en un archivo separado, al tener un .scss igual tu loader salta:

<style lang="scss" src="./style.scss"></style>
1

De acuerdo a esta documentación explican como puedes usar SASS en Vue.

Solo debes instalar estas dependencias

npm install -D sass-loader node-sass vue-style-loader

Y tu archivo webpack.mix.js debería verse así:

mix.webpackConfig({
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          "vue-style-loader",
          {
            loader: "css-loader",
            options: {
                modules: true
            }
          },
          "sass-loader"
        ]
      }
    ]
  }
});
4
  • esta configuración no funciona con laravel-mix
    – FeRcHo
    Commented el 4 ene. 2020 a las 21:24
  • @FeRcHo que error te da? Commented el 4 ene. 2020 a las 21:37
  • @FeRcHo actualice mi respuesta, espero te sirva ;) Commented el 8 ene. 2020 a las 6:12
  • siguen sin funcionar, ya había probado esta configuración peo aun no se compilan las clases
    – FeRcHo
    Commented el 10 ene. 2020 a las 18:22

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.