如何使用webpack和postcss/cssnext從node_modules導入字體

Question

我需要使用font-awesome。
PostCSS試圖找到字體的源目錄，但不是在node_modules/FONT-真棒/字體

錯誤文本：

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%'], 
     }, 
    }, 
}; 

Answer 1

這PostCSS模塊真正解決我的問題

https://github.com/devex-web-frontend/postcss-assets-rebase

Answer 2

您可以使用fa-font-path更改font-awesome查找字體的位置。在你的CSS，你可以做這樣的：

@fa-font-path: "font-awesome/fonts"; 
@import "font-awesome/css/font-awesome.min.css"; 

雖然我通常只通過設置$fa-font-path可變看到它.scss。 postcss-import會抱怨說，進口聲明需要先來，但至少它仍然有效。

您也可以在不使用postcss-import的情況下在CSS中使用@import語法，css-loader支持它。唯一的區別是，您需要用~開始路徑以指示它應該被解析爲node_module，否則它將被解釋爲相對路徑（如css-loader Readme中所示）。如果沒有postcss-import，下面的作品，並且不產生警告：

@fa-font-path: "font-awesome/fonts"; 
@import "~font-awesome/css/font-awesome.min.css";