我正在尝试更新我的 webpack 构建以利用 postcss 和 postcss-loader。但是我在加载字体、图像等时遇到问题。
例如尝试导入字体真棒。
这是我在 postcss 之前的设置，它有效：
CSS：
@import "~font-awesome/css/font-awesome.min.css";
webpack.config：
...
module: {
rules: [{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader?name=fonts/[name].[ext]'
},{
test: /\.(png|jpg)$/,
loader: 'file-loader?name=images/[name].[ext]'
},{
test: /\.html$/, loader: 'raw-loader'
}]
}
...
试图移动到这个：
@import 'font-awesome'
带有 postcss 的 webpack：
...
module: {
rules: [{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
importLoaders: 1
}
},{
loader: 'postcss-loader',
options: {
ident: 'postcss',
sourceMap: true,
plugins: [require('postcss-import')()]
}
}]
})
},{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader?name=fonts/[name].[ext]'
},{
test: /\.(png|jpg)$/,
loader: 'file-loader?name=images/[name].[ext]'
},{
test: /\.html$/, loader: 'raw-loader'
}]
}
...
但是，当我这样做时，会出现如下错误：
./style.css 中的错误模块构建失败：ModuleNotFoundError：找不到模块：错误：无法解析“/test-project/public”中的“../fonts/fontawesome-webfont.eot”
我也尝试了其他一些库（即引导程序、传单）并且遇到了同样的问题。