Fonts 如何使用webpack和PostSS/cssnext从节点_模块导入字体_Fonts_Webpack_Node Modules_Postcss_Cssnext

Fonts 如何使用webpack和PostSS/cssnext从节点_模块导入字体

fonts webpack

Fonts 如何使用webpack和PostSS/cssnext从节点_模块导入字体,fonts,webpack,node-modules,postcss,cssnext,Fonts,Webpack,Node Modules,Postcss,Cssnext,我需要使用令人敬畏的字体。 POSTSS尝试在源目录中查找字体，但在节点\u modules/font/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

我需要使用令人敬畏的字体。
POSTSS尝试在源目录中查找字体，但在节点\u modules/font/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]"
            },
        ],
    },
}

postss.config.js

module.exports = {
    plugins: {
        'postcss-import': {},
        'postcss-cssnext': {
            browsers: ['last 2 versions', '> 20%'],
        },
    },
};

您可以使用

fa-font-path

更改

font-awome

查找字体的位置。在CSS中，您可以这样做：

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

虽然我通常只在

.scss

中通过设置

$fa font path

变量看到它。

postsss导入

会抱怨导入语句需要放在第一位，但至少它仍然有效

您也可以在CSS中使用

@import

语法，而不使用

postss导入

，

CSS加载器

支持它。唯一的区别是，您需要以

开始路径，以指示它应该解析为

节点_模块

，否则它将被解释为相对路径（如中所示）。如果没有

postsss导入

，以下操作有效且不会产生警告：

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