Webpack解決エイリアスが動作しない

Question

私はかなり複雑なプロジェクト構造を持っているので、webpackのresolve.aliasを使用することに決めました。

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

をしかし、私は私のjs

import utils from 'scss/_utilities'; 

でそれを使用するとき、私はCannot find moduleエラーを取得しています：Resolveは私の設定では、このようになります。

私のディレクトリ構造は、このようなものです：私はか、私は（.scss）で、拡張子なし、とし、チルダ（~）せずに、様々な表記法を試してみました

WebPACKの3を使用しています

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

アンダースコア接頭辞なし（_）。私に何ができる？

Answer 1

エイリアスがほぼ正しく設定されているようです。 '..'も使用しているので、このように見えます。

resolve: { 
    alias: { 
     scss: path.resolve(__dirname, '..', 'source', 'sass') 
    } 
    }, 

ただし、主な問題はインポートステートメントにあります。 SCSSをインポートしようとしているので、import utils from 'scss/_utilities';は使用できません。代わりに@import '~scss/_utilities.scss';を使用する必要があります（注：チルダ（~）を使用することを忘れないでください。