Webpack - 样式表加载但没有字体
我能够在页面中看到我的样式表没有问题。但是，我无法让我的网页字体正常工作。我试图保存我的CSS的输出没有发生。我相信这就是字体不工作的原因。Webpack - 样式表加载但没有字体
的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;
}
打造出
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.
的文件夹结构
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>
好只是所以它很容易让人们看到我做了什么得到它在这里工作是：
我认为这是我更容易彻底清除SCSS，只是用CSS去模块开箱即用。这似乎有很大帮助。
我用[email protected]：christianalfoni/webpack-express-boilerplate.git来帮助我指导自己。知道我有一个工作的东西，实际上教会了我比在webpack之前学到的更多的东西。正如你可以猜到这不是很多：D
另一个主要的变化，真正帮助改变路径并不令人意外。但这些都是相对于output.path之前的路径性别而言的，但我认为这是相对于wepack.config.js而言的，并不是说从那里开始，所有内容都将被视为文档根目录，即使对于html和css也是如此。
**关键部分:) **
我也有更新我的快递成立，因为我没有给它一个express.static路径...哦，我的愚蠢，我怎么会错过这样一个基本事情..所以：
快速
app.use(express.static(__dirname + '/public/')); //Don't forget me :(
决赛CSS
/* 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']}))
];
}
};
我想们的说法对于每个尝试过的人来说都是。我觉得我到最后很遥远。我只是发布这个incase任何人都有类似的问题。我从中得到的只是使用那个锅炉板。或者因为这个原因，html内部的静态部分和parths。
由于萨斯不提供URL重写，使用url()有点tricky。一个简单的解决方法是使用入口文件的相对路径。
@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;
}
感谢您的反馈意见：D但是我得到： '错误在./~/css-loader?sourceMap!./~/sass-loader?sourceMap!./src/client/scss/main.scss 未找到模块：错误：无法解析C：\ var \ www \ wekindred.com \ src \ client \ scss中的'file'或'directory'../font/fontello.eot @ ./~/css-loader?sourceMap !. /~/sass-loader?sourceMap!./src/client/scss/main.scss 6：887-927 '我必须改变webpack.config中的内容吗？ –
请确保获得正确的相对路径：假设您的字体SCSS文件是在main.css中导入的，则需要从main.css到字体文件的路径。所以它应该看起来像：'../../../public/font/fontello.eot?42978343'..如果我正确计算目录;-) – Wolfgang
这是因为萨斯没有“解析URL”选项（但stylus少（默认选项）做的话）。我知道的唯一解决方案是使用另一个可以解析所有网址的装载器https://github.com/bholloway/resolve-url-loader。喜欢的东西：
{
test : /\.scss$/,
loaders: "!css!resolve-url!sass?sourceMap"
}
可悲的是，这并没有解决它对我来说：O –
位于文件夹结构中的Font.scss文件（显示在您的描述中）在哪里？是fontello.scss还是有另一个文件？到目前为止，在你的配置中找不到错误，但是我确定这是一个像Lindebergue描述的路径重复问题。 – Wolfgang