為什么 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'; – 它不起作用。 我收到錯誤“未定義的變量 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;

```

Answer 1

可能這可以幫助（我在那里回答）：

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

如果要重用webpack的別名，請替換

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

同

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

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

Answer 2

目前，有一個庫postcss-import-resolver來管理 module.css 文件中的別名。

在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')
          },
        })
      }
    }
}

在css文件中：

@import '@common/variables';

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

另外，請確保postcss-import是第一個插件。