3
webpackを使用したプロジェクトがあり、自分のscssにフォントを読み込もうとしています。マイbase.scssファイルがそうのようにフォントをロードしようとしている：Webpackを使用してプロジェクトにフォントを読み込むにはどうすればいいですか？
@font-face {
font-family: 'League Spartan';
src: url('/assets/fonts/leaguespartan-bold.eot');
src: url('/assets/fonts/leaguespartan-bold.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/leaguespartan-bold.woff2') format('woff2'),
url('/assets/fonts/leaguespartan-bold.woff') format('woff'),
url('/assets/fonts/leaguespartan-bold.ttf') format('truetype'),
url('/assets/fonts/leaguespartan-bold.svg#league_spartanbold') format('svg');
font-weight: bold;
font-style: normal;
}
は私のWebPACKの設定は、現在、このように設定されています。期待通り
const webpack = require('webpack');
const path = require('path');
const PATHS = {
dist: path.join(__dirname, '/dist'),
src: path.join(__dirname, '/src'),
style: path.join(__dirname,'/src/assets/stylesheets')
}
const TARGET = process.env.npm_lifecycle_event;
process.env.BABEL_ENV = TARGET;
exports.TARGET = TARGET;
var autoprefixer = require('autoprefixer');
module.exports = {
entry: [
'./src/index'
],
resolve: {
extenstion: ['', '.js', '.jsx']
},
output: {
path: PATHS.dist,
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loaders: ['babel?cacheDirectory'],
include: PATHS.src
},
{
test: /\.html$/,
loader: "html-loader",
include: PATHS.src
},
{
test: /\.png$/,
loader: "url-loader?limit=10000000",
include: PATHS.src
},
{
test: /\.svg/,
loader: 'svg-url-loader',
include: PATHS.src
},
{
test: /\.jpg$/,
loader: "file-loader",
include: PATHS.src
},
{
test: /\.scss$/,
loader: "style-loader!css-loader!postcss-loader",
include: PATHS.src
},
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader",
include: PATHS.src
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: "file-loader",
include: PATHS.src
}
]
},
postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ],
devtool: 'source-map',
devServer: {
contentBase: PATHS.dist,
hot: true,
historyAPIFallback: true,
inline: true,
progress: true,
stats: 'errors-only'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
};
私のプロジェクトのビルドが、フォントがありません全くロードされていないようです。私はCSSのファイルsrc: url('/fakepath/wontwork/fonts/leaguespartan-bold.eot');のフォントのパスを変更してこの理論をテストしたが、webpackが見つからずビルドしないので、問題がフォント用のパスであるかどうかはわかりませんパスが動作しているように見えます。
あなたのスタイル/ CSSのWebPACKの構成はどのようなもの？それは何を使用していますか？ –
実用的なノートに完全な設定ファイル –
を追加しました。「WOFFではない」フォントフォーマットの使用をやめてください。 Webfontのサポートは、FontSquirrelと友人が始まって以来ずっと続いています。彼らは時代に追いついていません。「eot」と「svg」は廃止され、放棄されました（文字通り、Specは廃止されました、ひどいアイデアでした）。また、WOFFは任意の 'ttf'や' otf'のopentypeフォントを扱うbyte-for-byteラッパーであるため、WOFF（特にwebデプロイ用）と同等のプレーンフォントの両方を行う理由はありません。あなたの人生を楽にしてください：WOFFだけを使用してください。 –