2
とWebPACKのは、私はWebPACKので最近多くの問題を抱えているように思える:)しかし、ここで君たちのために別の1行く：フォント - postcss
フォルダ構造を
CSS
@font-face {
font-family: 'LatoBlack';
src: url('/font/Lato-Black.eot'); /* IE9 Compat Modes */
src: url('/font/Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/font/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
url('/font/Lato-Black.woff') format('woff'), /* Modern Browsers */
url('/font/Lato-Black.ttf') format('truetype');
font-style: normal;
font-weight: normal;
text-rendering: optimizeLegibility;
}
WebPACKのコンフィグ
'use strict';
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var qs = require('querystring');
var font = require('postcss-font-magician')({
hosted: '/public/fonts'
});
var precss = require('precss');
var autoprefixer = require('autoprefixer');
var stripInlineComments = require('postcss-strip-inline-comments');
module.exports = {
devtool: 'eval-source-map',
// resolve: { modulesDirectories: ['node_modules'], extension: ['', '.js', '.css'] },
entry: [
'webpack-hot-middleware/client?reload=true',
path.join(__dirname, 'src/client/js/Kindred')
// path.join(__dirname, 'app/main')
],
output: {
path: path.join(__dirname, '/public/'),
filename: '[name].js',
publicPath: '/'
},
plugins: [
new HtmlWebpackPlugin({
template: 'app/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
],
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
"presets": ["react", "es2015", "stage-0", "react-hmre"]
}
}, {
test: /\.json?$/,
loader: 'json'
},
{test: /\.jpg$/, loader: "file-loader"},
// Font Definitions
{
test: /\.css$/,
loaders: [
'style-loader',
'css-loader?importLoaders&' + qs.stringify({
modules: true,
importLoaders: 1,
localIdentName: '[path][name]-[local]'
}),
'postcss-loader?parser=postcss-scss'
]
},
{ test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, loader: 'url-loader?limit=100000' }
]
},
postcss: function (webpack) {
return [
stripInlineComments
, require('postcss-fontpath' , {checkPath: true})
, font
, precss
, autoprefixer
, require('postcss-simple-vars')
, require('postcss-nested'
, autoprefixer({browsers: ['last 2 versions']}))
];
}
};
エラーメッセージ
ERROR in ./~/css-loader?importLoaders&modules=true&importLoaders=1&localIdentName=%5Bpath%5D%5Bname%5D-%5Blocal%5D!./~/postcss-loader?parser=postcss-scss!./src/client/scss/main.css
Module not found: Error: Cannot resolve 'file' or 'directory' ../../../client/font/fontello.eot in C:\var\www\webpack-express-boilerplate\src\client\scss
@ ./~/css-loader?importLoaders&modules=true&importLoaders=1&localIdentName=%5Bpath%5D%5Bname%5D-%5Blocal%5D!./~/postcss-loader?parser=postcss-scss!./src/client/scss/main.css 6:876-929 6:955-1008
解決策は見つかりましたか？私はwebpackでフォントを読み込むのに問題があります – bitten
私の答えがまったく役立つかどうか教えてください。私もトラブルシューティングに役立つ可能性があります –
それは..それは私の問題は私のwebpackの設定で小さな誤植であったことが判明。ファイルローダーのインクルードパスは存在しませんでしたが、私が得ていたエラーは、存在しないフォルダとは何の関係もありません。私はあなたが答えを投稿していただきありがとうございます..それはまだ非常に有用です！ – bitten