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?
webpack.mix.js
.sass('resources/sass/app.scss', 'public/css', {modules:true})
pero suena improbablenode-sass
?