我在我的项目中使用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;
```
答案 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
})
);