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í