我正在尝试更新我的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'
webpack w / postcss:
...
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'
我也尝试过其他一些库(即bootstrap,leaflet),并遇到了同样的问题 .
2 回答
看来
css-loader
无法解析font-awesome/fonts
目录的相对url路径 .你需要在
css-loader
选项中使用alias .我在一个示例项目中测试了它,它似乎成功编译 .
如果您还使用了使用
../fonts
相对路径的项目,则可能还需要更具体的别名 .这个webpack配置解决了我的问题: