如何使用webpack和postcss/cssnext从node_modules导入字体？

Question

如何使用webpack和postcss/cssnext从node_modules导入字体？

3

我需要使用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%'],
        },
    },
};

- FlamyTwista

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- FlamyTwista · Answer 1

这个 PostCSS 模块真的解决了我的问题

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

- Michael Jungo · Answer 2

您可以使用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";