Webpack - Chargement de la feuille de style, mais pas de polices
Je peux voir ma feuille de style dans la page sans problèmes. Cependant, je n'arrive pas à faire fonctionner mon webfonts. J'ai essayé de sauvegarder la sortie de mon css qui ne se produit pas. Je crois que c’est la raison pour laquelle les polices ne fonctionnent pas.
Webpack
var webpack = require ('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
resolve: {
extensions: ['', '.js']
},
entry: ['webpack-hot-middleware/client','./src/client/js/Kindred.js'],
output: {
path: './public',
filename: 'bundle.js',
publicPath: '/public/js'
},
devtool: 'cheap-module-source-map',
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {presets: ['es2015', 'react', 'react-hmre', 'stage-0']}
},
{test: /\.scss$/, loaders: [
'style?sourceMap&modules',
'css?sourceMap&modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
'resolve-url',
'sass?sourceMap&modules']},
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader?modules!css-loader?sourceMap&modules" )},
{test: /\.png$/, loader: "url-loader?limit=100000"},
{test: /\.jpg$/, loader: "file-loader"},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file?name=public/font/[name].[ext]'
}
]
},
sassLoader: {
includePaths: [ 'src/client/scss' ]
},
plugins: process.env.NODE_ENV === 'production' ? [
new ExtractTextPlugin ('app.css', {allChunks: true}),
new webpack.optimize.DedupePlugin (),
new webpack.optimize.OccurrenceOrderPlugin (),
new webpack.optimize.UglifyJsPlugin ()
] : [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new ExtractTextPlugin("[name].css")
]
};
Font.scss
@font-face {
font-family: 'fontello';
src: url('/public/font/fontello.eot?42978343');
src: url('/public/font/fontello.eot?42978343#iefix') format('embedded-opentype'),
url('/public/font/fontello.woff2?42978343') format('woff2'),
url('/public/font/fontello.woff?42978343') format('woff'),
url('/public/font/fontello.ttf?42978343') format('truetype'),
url('/public/font/fontello.svg?42978343#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
Construire dehors
Hash: 6dbe5412ed2de3ad1f84
Version: webpack 1.13.1
Time: 5989ms
Asset Size Chunks Chunk Names
bundle.js 2.2 MB 0 [emitted] main
0.4dfc2adf9da9e1d82440.hot-update.js 402 kB 0 [emitted] main
4dfc2adf9da9e1d82440.hot-update.json 36 bytes [emitted]
bundle.js.map 2.51 MB 0 [emitted] main
0.4dfc2adf9da9e1d82440.hot-update.js.map 419 kB 0 [emitted] main
chunk {0} bundle.js, 0.4dfc2adf9da9e1d82440.hot-update.js, bundle.js.map, 0.4dfc2adf9da9e1d82440.hot-update.js.map (main) 2.08 MB [rendered]
[565] ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!./~/resolve-url-loader!./~/sass-loader?sourceMap&modules!./src/client/scss/main.scss 401 kB {0} [built]
+ 565 hidden modules
webpack: bundle is now VALID.
Structure du dossier
HTML
<!doctype html public="storage">
<html>
<link rel='stylesheet' href='/public/styles.css' type='text/css' />
<title>MyKindred.com</title>
<div id=app></div>
<script src="/public/js/bundle.js"></script>
Ok, il est donc facile pour les gens de voir ce que j'ai fait pour que cela fonctionne ici:
Je pense qu'il était plus facile pour moi de supprimer complètement scss et d'aller simplement avec les modules css prêts à l'emploi. Cela semblait aider beaucoup.
J'ai utilisé [email protected]: christianalfoni/webpack-express-boilerplate.git pour m'aider à me guider. Le fait de savoir que je travaillais m'a appris beaucoup plus que ce que j'ai probablement appris auparavant dans WebPack. Comme vous pouvez le deviner, ce n’était pas beaucoup: D
Aussi, le changement principal qui a vraiment aidé a été de changer les chemins sans surprise. Mais ceux-ci étaient relatifs au chemin sex dans output.path J'avais déjà lu ceci, mais je pensais que c'était relatif au wepack.config.js et non pas à partir de là, tout serait considéré comme la racine du document, même pour le HTML et le CSS.
**ÉLÉMENT CLÉ :) **
Je dois également mettre à jour mon installation express, car je ne lui avais pas donné de chemin express.static ... Oh, ma folie, comment pourrais-je rater une chose aussi fondamentale .. Donc:
Express
app.use(express.static(__dirname + '/public/')); //Don't forget me :(
CSS finale
/* Webfont: Lato-Black */@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;
}
Wekpack.config
'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 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: 'public/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"
},
{
test: /\.css$/,
loaders: [
'style-loader',
'css-loader?importLoaders&' + qs.stringify({
modules: true,
importLoaders: 1,
localIdentName: '[path][name]-[local]'
}),
'postcss-loader?parser=postcss-scss'
]
},
// Font Definitions
{ test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=font/[name].[ext]' },
{ test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=font/[name].[ext]' },
{ test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=font/[name].[ext]' },
{ test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=font/[name].[ext]' },
{ test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=font/[name].[ext]' }
]
},
postcss: function (webpack) {
return [
stripInlineComments
, precss
, autoprefixer
, require('postcss-simple-vars')
, require('postcss-nested'
, autoprefixer({browsers: ['last 2 versions']}))
];
}
};
Je veux dire désolé pour tout le monde qui a essayé. Je sens que j'étais loin à la fin. Je ne signale que si tout le monde a des problèmes similaires. Ce que je retiendrais, c’est d’utiliser la plaque de la chaudière. Ou la partie statique et parths à l'intérieur du code HTML à cause de cela.
Puisque Sass ne fournit pas de réécriture d'URL, utiliser url() est un peu compliqué . Une solution simple consiste à utiliser des chemins relatifs vers le fichier d'entrée.
@font-face {
font-family: 'fontello';
src: url('../font/fontello.eot?42978343');
src: url('../font/fontello.eot?42978343#iefix') format('embedded-opentype'),
url('../font/fontello.woff2?42978343') format('woff2'),
url('../font/fontello.woff?42978343') format('woff'),
url('../font/fontello.ttf?42978343') format('truetype'),
url('../font/fontello.svg?42978343#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
C’est parce que Sass n’a pas l’option "résoudre l’URL" (mais stylus et moins (option par défaut) l’a). La seule solution que je connaisse consiste à utiliser un autre chargeur qui résoudra toutes les URL https://github.com/bholloway/resolve-url-loader . Quelque chose comme:
{
test : /\.scss$/,
loaders: "!css!resolve-url!sass?sourceMap"
}