我正在尝试使用 @font-face
在我的 CSS 文件中加载字体,但该字体永远不会加载。这是我的目录结构。
然后在 webpack.config.js
我有加载器来获取字体。
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: [
"./index.js"
],
output: {
path: __dirname+"/build",
filename: "main.js"
},
plugins: [
new webpack.NoErrorsPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{ test: /\.js$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/ },
{ test: /\.jsx?$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/ },
{ test: /\.svg$/, loader: "raw" },
{ test: /\.css$/, loader: "style-loader!css-loader" },
{ test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file?name=src/css/[name].[ext]'}
]
}
};
在我的 CSS 文件中,我有这个:
@font-face {
font-family: 'Darkenstone';
src: url('./Darkenstone.woff') format('woff');
}
body {
background-color: green;
font-size: 24px;
font-family: 'Darkenstone';
}
最后,我在 index.js
中调用我的 CSS 文件:
import './src/css/master.css';
一切正常,但从不加载字体。
最佳答案
在尝试了很多东西之后,下一个加载器完成了工作。我使用了 url-loader 而不是文件加载器。您需要安装 url-loader。
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
关于css - 使用 Webpack 和 font-face 加载字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45489897/