Webpack Resolve Alias ​​funktioniert nicht

Question

Ich habe eine ziemlich verwirrte Projektstruktur, so entschied ich mich für Webpack resolve.alias zu verwenden. Resolve sieht wie folgt in meinem config:

... 
    resolve: { 
    alias: { 
     scss: path.resolve(__dirname, 'source', 'sass') // I tried '..', 'source' as well 
    } 
    }, 
... 

Aber wenn ich es verwende in meinem js

import utils from 'scss/_utilities'; 

Ich erhalte ein Cannot find module Fehler.

Meine Verzeichnisstruktur ist wie folgt:

| webpack 
|- dev.js 
|- prod.js 
| source 
|- sass 
|-- _common.scss 
|-- _variables.scss 
|-- globals.scss 
|- js 
|-- components 
|--- Card 
|---- index.js // from here I am importing 

Ich bin mit Webpack 3.

ich verschiedene Schreibweisen mit und ohne Tilde (~) versucht, mit und ohne Verlängerung (.scss), mit oder ohne Unterstrichpräfix (_). Was kann ich tun?

Answer 1

Ihr Alias ​​scheint fast korrekt eingestellt zu sein. Sie müssen '..' auch verwenden, so sieht es so aus.

Noch das Hauptproblem liegt in Ihrer Importaussage. Da Sie versuchen, einige SCSS zu importieren, können Sie import utils from 'scss/_utilities'; nicht verwenden. Stattdessen müssen Sie @import '~scss/_utilities.scss'; verwenden (HINWEIS: vergessen Sie nicht, die Tilde (~) zu verwenden.