How can I import fonts from node_modules with webpack and postcss/cssnext

Question

I'm need to use font-awesome.
PostCSS tries to find font in source directory but not in node_modules/font-awesome/fonts

Error text:

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

score 0 · Accepted Answer · answered Apr 08 '17 at 19:50

0

This PostCSS module really solved my problem

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

answered Apr 08 '17 at 19:50

FlamyTwista

447
5
17

score -2 · Answer 2 · answered Mar 21 '17 at 18:57

You can use fa-font-path to change where font-awesome looks for the fonts. In your CSS you can do it like this:

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

Although I've usually only seen it in .scss by setting the $fa-font-path variable. The postcss-import will complain that import statements need to come first, but at least it still works.

You can also use the @import syntax in CSS without the postcss-import, the css-loader supports it. The only difference is that you need to start your paths with a ~ to indicate that it should be resolved as a node_module, because otherwise it's interpreted as a relative path (as shown in the css-loader Readme). Without the postcss-import, the following works and does not produce a warning:

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

Unfortunately, this not works. My task is to change SCSS to cssnext and not use SCSS anymore. Standard syntax is better)) Simultaneously I need to continue using libraries from node_modules that uses fonts, images, etc. So, for now the best answer is found by me, Maybe you interested in it too: http://stackoverflow.com/a/43299680/1638298 — FlamyTwista, Apr 08 '17 at 19:57

How can I import fonts from node_modules with webpack and postcss/cssnext

2 Answers2