为什么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配置位于root目录下。所以，问题是当我用像@import '@styles/vars.css';这样的css写东西的时候-它不能工作。我得到一个错误‘未定义的变量bla bla bla...’。但是，当我在js文件中导入块并编写import Logo from '@blocks/logo';时，它工作得很好。另外，我想要注意的是，@import '@styles/vars.css'; -与触控笔一起工作。所以也许我错过了一些关于postcss-import插件的东西。如何让它工作？

更新postcss配置部分：

```javascript

var webpack = require("webpack")；

函数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
  })
);