sass webpack autoprefixer sass-loader

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í