web-dev-qa-db-fra.com

webpack (avec sass-loader) - le fichier scss @import ne reconnaît pas l'alias de résolution

Ma structure de projet:

webpack.config.js
app--

   --> src
   ---->> components
   ------>>> myComponent.js
   ------>>> myComponent.scss

   --> styles
   ---->> variables.scss

Dans webpack.config module.exports:

...
resolve: {
    alias: {
       styles: path.join(__dirname, 'app/styles') 
   }
}

Dans mon fichier - myComponent.scss:

@import "styles/variables";

Je reçois cette erreur lors de la construction de bundle.js:

Module build failed:
@import "styles/variables";
^
      File to import not found or unreadable: styles/variables

Comment puis-je @importer des alias dans des fichiers sass?

sasswebpackautoprefixersass-loader
29
tome

J'ai pu utiliser, sur une feuille de style, un alias que j'ai défini dans webpack en utilisant ce qui suit:

@import '~alias/variables';

juste en préfixant l'alias avec ~ a fait l'affaire pour moi, comme le suggère la documentation dans ici

67
BenR

Un autre correctif lié à ce sujet, supprimez .scss

@import '~scss/common.scss';

devrait être

@import '~scss/common';
5
Kirk Strobeck

Depuis votre webpack.config.js le fichier est déjà dans le /app dossier, l'alias ne doit-il pas être:

resolve: {
   alias: {
       styles: path.join(__dirname, 'styles') 
   }
}

?

3
CrocoDillon

Dans mon cas, la dépendance est un module de nœud, donc je peux l'importer comme ceci:

@import '~node-module-name/variables';

Et lorsque vous utilisez le nom du répertoire du module de nœud réel, mon éditeur (PhpStorm) n'affiche plus d'erreur de chemin non résolue (le problème mentionné par @tkiethanom). Il semble que je doive spécifier un alias dans la configuration du webpack si je veux utiliser les importations de style sass (par exemple my-package/colors au lieu de my-package/_colors.scss), et il semble que peu importe le nom de cet alias, tant que j'utilise le nom de répertoire du module de nœud

2
gedijedi