我正在尝试使用CSS文件加载字体,@font-face但是字体从未加载。这是我的目录结构。
@font-face
然后在webpack.config.js我有加载程序来获取字体。
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'; }
最后,我使用以下命令调用我的CSS文件index.js:
index.js
import './src/css/master.css';
一切正常,但字体永远不会加载。
在尝试了很多东西之后,下一个装载机完成了工作。我使用url-loader代替了文件加载器。您需要安装url-loader。
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }