webpack(con sass-loader)-archivo scss @import no reconoce resolver alias

webpack 4 sass loader

Question

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?

Answer 1

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'')
}
}

?

Answer 2

Otra solución relacionada con este tema, eliminar .scss

@import ''~scss/common.scss'';

debiera ser

@import ''~scss/common'';

Answer 3

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í