javascript - webpack エイリアスが機能しないのはなぜですか?

Question

プロジェクトで webpack と postcss-import を使用しています。私はコンポーネントを作成し、一部のコンポーネントは別のコンポーネントにネストできるため、それらのパスなどを記述するのは複雑import '../../../component-a';です。この問題を解決するためにエイリアスを作成したいと思います。だから私のwebpack.config.jsに書いた：

    resolve: {
        alias: {
            '@blocks': path.resolve(__dirname, './source/blocks'),
            '@styles': path.resolve(__dirname, './source/styles')

ルートにある私のwebpack構成。だから、問題は私が css のようなものを書くときです@import '@styles/vars.css';– それは動作しません. 「undefined variable bla bla bla...」というエラーが表示されます。しかし、js ファイル内にブロックをインポートして書き込むと、import Logo from '@blocks/logo';問題なく動作します。@import '@styles/vars.css';また、スタイラスで動作することにも注意してください。したがって、postcss-import プラグインについて何か見逃している可能性があります。それを機能させる方法は？

UPD postcss 構成部分:

```

var webpack = require("webpack");

function postcssModules () {
    return [
        require('postcss-nested')(),
        require('postcss-import')({
            addDependencyTo: webpack
        }),
        require('postcss-simple-vars'),
        require('postcss-cssnext')({
            warnForDuplicates: false
        }),
        require('lost')
    ]
};

module.exports = postcssModules;

```