webentwicklung-frage-antwort-db.com.de

webpack (mit sass-loader) - scss-datei @import erkennt auflösungsalias nicht

Meine Projektstruktur:

webpack.config.js
app--

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

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

In webpack.config module.exports:

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

In meiner Datei - myComponent.scss:

@import "styles/variables";

Ich erhalte diesen Fehler beim Erstellen von bundle.js:

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

Wie kann ich Aliase in sass-Dateien @importieren?

sasswebpackautoprefixersass-loader
29
tome

In einem Stylesheet konnte ich einen Alias ​​verwenden, den ich im Webpack folgendermaßen definiert habe:

@import '~alias/variables';

nur durch das Präfixieren des Alias ​​mit ~ hat den Trick für mich gemacht, wie in der Dokumentation in hier vorgeschlagen

67
BenR

Ein weiteres Update zu diesem Thema, entfernen .scss

@import '~scss/common.scss';

sollte sein

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

Seit deinem webpack.config.js Datei ist bereits in der /app Ordner, sollte der Alias ​​nicht sein:

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

?

3
CrocoDillon

In meinem Fall ist die Abhängigkeit ein Knotenmodul, daher kann ich es folgendermaßen importieren:

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

Und wenn ich den tatsächlichen Node-Modul-Dir-Namen verwende, zeigt mein Editor (PhpStorm) keinen ungelösten Pfadfehler mehr an (das Problem, das @tkiethanom erwähnte). Es sieht so aus, als müsste ich in der Webpack-Konfiguration einen Alias ​​angeben, wenn ich Importe im Sass-Stil verwenden möchte (z. B. my-package/colors Anstatt von my-package/_colors.scss), und es scheint, dass es egal ist, wie der Name dieses Alias ​​lautet, solange ich den Verzeichnisnamen des Knotenmoduls verwende

2
gedijedi