为什么webpack别名不起作用

Why webpack alias doesn't work?

本文关键字：不起作用 别名 webpack 为什么      更新时间：2023-09-26

我在我的项目中使用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…'。但是当我在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;

' ' '

目前，有一个postcss-import-resolver库来管理module.css文件中的别名。

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'
}

另外，确保postcss-import是第一个插件之一。

也许这可以帮助(我回答那里):

https://github.com/postcss/postcss-import/issues/190 # issuecomment - 298078092https://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
  })
);
相关文章：