Css 字体加载器

Css 字体加载器,css,reactjs,webpack,fonts,postcss,Css,Reactjs,Webpack,Fonts,Postcss,我无法使用PostSS加载字体 我的src目录中有如下字体文件: 我的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'); } module: { r

我无法使用PostSS加载字体

我的src目录中有如下字体文件:

我的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');
}
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']),               
        },
    ]
},
等等。 我的postsss.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']
    })]
}
我的网页包文件如下所示:

@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');
}
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']),               
        },
    ]
},
我在编译时没有任何问题

@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文件与字体子文件夹位于同一目录中,并且您正在使用src属性。。。检查

您的CSS文件与字体子文件夹位于同一目录中,并且您正在使用src属性。。。检查