なぜ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の設定は、ルートにあります。だから、問題は私が@import '@styles/vars.css';のようなものをCSSで書くときです。うまくいきません。私はエラー 'undefined variable bla bla bla ...'を取得します。しかし、jsファイルの中にブロックをインポートしてimport Logo from '@blocks/logo';と書くと、うまくいきます。また、私は@import '@styles/vars.css';がスタイラスで動作することに気付きたいと思います。だから、多分私は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; 

` ``

Answer 1

これは（私が答えた）を助けることができるかもしれませ：

UPDのpostcssの設定部分が

https://github.com/postcss/postcss-import/issues/190#issuecomment-298078092 https://github.com/postcss/postcss-import/issues/187#issuecomment-298078080

O再利用のWebPACKのエイリアス、

const webpackBaseConfig = require('./webpack.config.base').default; 

const resolver = ResolverFactory.createResolver(
Object.assign({}, 
    webpackBaseConfig.resolve, { 
    modules: ['src', 'node_modules'], 
    useSyncFileSystemCalls: true, 
    fileSystem 
    }) 
);