我需要使用font-awesome PostCSS尝试在源目录中查找字体,但不在node_modules / font-awesome / fonts中查找字体
错误文字:
Error: Can't resolve '../fonts/fontawesome-webfont.eot?v=4.7.0' in 'F:\OpenServer\domains\polymer-postcss\src'
导入:
@import "font-awesome/css/font-awesome.min.css";
webpack.config.js:
var cssPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {app: './src/app.js'},
output: {
path: './dist',
filename: '[name].js',
publicPath: '/dist/',
},
plugins: [new cssPlugin({filename: '[name].css'}),],
module: {
rules: [
{
test: /\.css$/,
loader: cssPlugin.extract({
use: 'css-loader?importLoaders=1&sourceMap!postcss-loader?sourceMap',
}),
},
{
test: /\.(svg|png|gif|jpe?g|woff|woff2|eot|ttf)$/i,
use: "url-loader?limit=10000&name=[path][name].[ext]?[hash]"
},
],
},
}
postcss.config.js
module.exports = {
plugins: {
'postcss-import': {},
'postcss-cssnext': {
browsers: ['last 2 versions', '> 20%'],
},
},
};
答案 0 :(得分:0)
这个PostCSS模块真的解决了我的问题
答案 1 :(得分:-1)
您可以使用fa-font-path
更改font-awesome
查找字体的位置。在你的CSS中你可以这样做:
@fa-font-path: "font-awesome/fonts";
@import "font-awesome/css/font-awesome.min.css";
虽然我通常只能通过设置.scss
变量在$fa-font-path
中看到它。 postcss-import
会抱怨导入语句需要先出现,但至少它仍然有用。
您也可以在CSS中使用@import
语法而不使用postcss-import
,css-loader
支持它。唯一的区别是您需要使用~
开始路径,以表明它应该被解析为node_module
,否则它将被解释为相对路径(如图所示) css-loader
Readme)。如果没有postcss-import
,则以下工作并且不会产生警告:
@fa-font-path: "font-awesome/fonts";
@import "~font-awesome/css/font-awesome.min.css";