为什么 webpack 别名不起作用？

Question

I use webpack and postcss-import in my project. I write components and some components can be nested to another so it's complicated to write path for them like import '../../../component-a'; and so on. I want to create alias for to solve this problem. So in my webpack.config.js I wrote:

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

my webpack config located in root. So, the problem is when I write in css something like @import '@styles/vars.css'; – it doesn't works. I get en error 'undefined variable bla bla bla...'. But when I import blocks inside of js files and write import Logo from '@blocks/logo'; – it works just fine. Also I wanna notice that @import '@styles/vars.css'; – works with stylus. So maybe I miss something about postcss-import plugin. How to make it works?

UPD postcss config part:

```

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

May be this can help (I answered there):

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

If you want to reuse webpack's alias, replace

const resolver = ResolverFactory.createResolver({
  alias: {
    '@blabla': path.resolve(__dirname, 'src')
  },
  extensions: ['.css'],
  modules: ['src', 'node_modules'],
  useSyncFileSystemCalls: true,
  fileSystem
});

with

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

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

Answer 2

For now, there is a library postcss-import-resolver to manage aliases in module.css files.

in webpack.config.js :

import path from 'path';
import resolver from 'postcss-import-resolver';

...
{
  loader: 'postcss-loader',
  options: {
    plugins: {
      'postcss-import': {
        resolve: resolver({
          alias: {
            '@common': path.resolve('./src/common/styles')
          },
        })
      }
    }
}

and in css file:

@import '@common/variables';

div {
    background-color: var(--common-var); // variable from './src/common/styles/variables.css'
}

Also, make sure that postcss-import is one of the first plugins.