字体加载器 postcss

Question

我无法使用 postcss 加载字体。

我的 src 目录中有字体文件，如下所示： https ://i.stack.imgur.com/KYCym.png

我的 css 文件如下所示：

@font-face{
    font-family: Boxley ;
    src: url(./fonts/Boxley.ttf), format('ttf');
}
@font-face{
    font-family: Boxley-Bold;
    src: url(./fonts/Boxley-Bold.ttf), format('ttf');
}

等等。我的 Postcss.config.js 看起来像这样：

module.exports = {
    plugins: [
        require('precss'),
        require("css-mqpacker"),
        require("postcss-cssnext"),
        require("cssnano"),
        require("rucksack-css"),
        require("postcss-font-magician")({
        hosted: ['./src/css/fonts']
    })]
}

我的 webpack 文件如下所示：

module: {
    rules: [{   
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader"
            }
        },
        { 
            test: /\.(png|woff|woff2|eot|ttf|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
            loader: 'url-loader?limit=100000' 
        },
        {
            test: /\.css$/,
            loaders:ExtractTextPlugin.extract(['css-loader', 'postcss-loader']),
        },
        {
            test: /\.scss$/,
            loaders: ExtractTextPlugin.extract(['css-loader', 'postcss-loader']),               
        },
    ]
},

编译时我没有任何问题

Answer 1

@font-face{
    font-family: Boxley;
    src: url(fonts/Boxley.ttf), format('ttf');
}

@font-face{
    font-family: Boxley-Bold;
    src: url(fonts/Boxley-Bold.ttf), format('ttf');
}

您的 CSS 文件与 fonts 子文件夹位于同一目录中，并且您正在使用 src 属性...检查此处。