webpack(con sass-loader)-archivo scss @import no reconoce resolver alias
webpack 4 sass loader (3)
Mi estructura de proyecto:
webpack.config.js
app--
--> src
---->> components
------>>> myComponent.js
------>>> myComponent.scss
--> styles
---->> variables.scss
En webpack.config module.exports:
...
resolve: {
alias: {
styles: path.join(__dirname, ''app/styles'')
}
}
En mi archivo - myComponent.scss:
@import "styles/variables";
Estoy obteniendo este error al compilar bundle.js:
Module build failed:
@import "styles/variables";
^
File to import not found or unreadable: styles/variables
¿Cómo puedo @importar alias en archivos sass?
Como su archivo webpack.config.js
ya se encuentra en la carpeta /app
, ¿no debería ser el alias:
resolve: {
alias: {
styles: path.join(__dirname, ''styles'')
}
}
?
Otra solución relacionada con este tema, eliminar .scss
@import ''~scss/common.scss'';
debiera ser
@import ''~scss/common'';
Pude utilizar, en una hoja de estilo, un alias que definí en un paquete web usando lo siguiente:
@import ''~alias/variables'';
solo al ponerle un prefijo al alias con ~
hice el truco para mí, como lo sugiere la documentación aquí