为什么webpack别名不起作用?

时间:2016-08-09 20:59:59

标签: javascript import webpack alias postcss

我在我的项目中使用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中。所以,问题是当我用css写@import '@styles/vars.css';之类的东西时 - 它不起作用。我得到了错误' undefined variable 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;

```

1 个答案:

答案 0 :(得分:0)

可能这有帮助(我在那里回答):

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