web-dev-qa-db-ja.com

webpack（sass-loaderを使用）-scssファイル@importはエイリアスの解決を認識しません

私のプロジェクト構造：

webpack.config.js
app--

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

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

Webpack.config module.exportsで：

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

私のファイル-myComponent.scss：

@import "styles/variables";

Bundle.jsをビルドすると、このエラーが発生します。

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

Sassファイルのエイリアスを@importするにはどうすればよいですか？

sasswebpackautoprefixersass-loader
29
tome

以下を使用して、webpackで定義したエイリアスをスタイルシートで使用できました。

@import '~alias/variables';

エイリアスの前に~を付けるだけで、 here のドキュメントで示唆されているように、私にとってはうまくいきました。

67
BenR

このテーマに関連する別の修正、削除.scss

@import '~scss/common.scss';

あるべき

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

webpack.config.jsファイルは既に/appフォルダ、エイリアスは次のようにしないでください：

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

？

3
CrocoDillon

私の場合、依存関係はノードモジュールなので、次のようにインポートできます。

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

また、実際のノードモジュールのディレクトリ名を使用すると、エディター（PhpStorm）で未解決のパスエラーが表示されなくなりました（@tkiethanomが言及した問題）。 sassスタイルのインポートを使用する場合、webpack configでエイリアスを指定する必要があるようです（例：my-package/colors の代わりに my-package/_colors.scss）、ノードモジュールのディレクトリ名を使用している限り、そのエイリアスの名前は重要ではないようです。

2
gedijedi