Webpack - 样式表加载但没有字体

Posted

技术标签:

【中文标题】Webpack - 样式表加载但没有字体【英文标题】:Webpack - Style sheet loading but no fonts 【发布时间】:2016-11-25 18:37:53 【问题描述】:

我可以毫无问题地在页面中看到我的样式表。但是我无法让我的网络字体工作。我试图保存我的 css 的输出,但没有发生。我相信这就是字体不起作用的原因。

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")
    ]

;

字体.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>

【问题讨论】:

您的 Font.scss 文件(显示在您的描述中)在您的文件夹结构中的什么位置?是 fontello.scss 还是有其他文件?到目前为止,在您的配置中找不到错误,但我很确定这是像 Lindebergue 所描述的路径相关问题。 【参考方案1】:

好的,人们很容易看到我为让它在这里工作所做的工作:

我认为完全删除 scss 并直接使用 css 模块对我来说更容易。这似乎很有帮助。

我使用 git@github.com:christianalfoni/webpack-express-boilerplate.git 帮助我引导自己完成。知道我有一个工作的东西实际上教给我的东西比我之前在 webpack 中学到的要多得多。你可以猜到这不是很多:D

另外一个真正有帮助的主要变化是改变路径,这并不奇怪。但这些与output.path 中的路径性相关,我之前读过此内容,但认为这与wepack.config.js 相关,并不是说从那里开始所有内容都将被视为文档根目录,即使对于 html 和 css 也是如此。

**关键部分:) **

我还必须更新我的 express 设置,因为我没有给它一个 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']))
        ];
    
;

我想对所有尝试过的人说声抱歉。我觉得我到最后还差得很远。我只发布此内容,以防有人遇到类似问题。我从中得到的只是要么使用那个样板。或者因为这个原因,html中的静态部分和部分。

【讨论】:

【参考方案2】:

那是因为 Sass 没有“解析 url”选项(但 stylus 和 less(默认选项)确实有)。我知道的唯一解决方案是使用另一个加载器来解析所有 url https://github.com/bholloway/resolve-url-loader。类似的东西:


   test   : /\.scss$/,
   loaders: "!css!resolve-url!sass?sourceMap"
   

【讨论】:

遗憾的是这并没有为我解决这个问题:O【参考方案3】:

由于 Sass 不提供 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 但是我得到了:ERROR in ./~/css-loader?sourceMap!./~/sass-loader?sourceMap!./src/client/scss/main.scss Module not found: Error: Cannot resolve 'file' or 'directory' ../font/fontello.eot in C:\var\www\wekindred.com\src\client\scss @ ./~/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' ..如果我正确计算了目录;-)

以上是关于Webpack - 样式表加载但没有字体的主要内容,如果未能解决你的问题,请参考以下文章

CSS样式表加载顺序问题

将样式组件与反应和故事书一起使用时未加载字体

如何在 webpack 中加载 sass 样式表中使用的图像?

webpack常用插件

React-Bootstrap 样式未与故事书一起加载

Chrome 未加载样式表