Wie kann ich Schriftarten von node_modules mit webpack und postcss/cssnext importieren

Question

Ich muss font-awesome verwenden.
PostCSS versucht Schriftart in Quellverzeichnis zu finden, aber nicht in node_modules/font-awesome/fonts

Text Fehler:

Error: Can't resolve '../fonts/fontawesome-webfont.eot?v=4.7.0' in 'F:\OpenServer\domains\polymer-postcss\src' 

Import:

@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

Dieses PostCSS Modul mein Problem wirklich

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

Answer 2

können Sie fa-font-path verwenden zu ändern, wo font-awesome für die Schriftarten aussieht. In CSS können Sie es wie folgt tun:

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

Obwohl ich in der Regel nur durch die Einstellung der $fa-font-path Variable in .scss gesehen habe. Die wird sich beschweren, dass Importanweisungen zuerst kommen müssen, aber zumindest funktioniert es immer noch.

Sie können auch die @import Syntax in CSS ohne die verwenden, die css-loader unterstützt es. Der einzige Unterschied besteht darin, dass Sie Ihre Pfade mit einer beginnen müssen, um anzugeben, dass sie als node_module aufgelöst werden soll, da sie andernfalls als relativer Pfad interpretiert wird (wie in der css-loader Readme gezeigt). Ohne die postcss-import, folgende Arbeiten und erzeugt keine Warnung:

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