草庐IT

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

coder 2024-05-07 原文

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

网页包

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>

最佳答案

由于 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;
}

关于javascript - Webpack - 样式表加载但没有字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38516601/

有关javascript - Webpack - 样式表加载但没有字体的更多相关文章

  1. ruby - 难道Lua没有和Ruby的method_missing相媲美的东西吗? - 2

    我好像记得Lua有类似Ruby的method_missing的东西。还是我记错了? 最佳答案 表的metatable的__index和__newindex可以用于与Ruby的method_missing相同的效果。 关于ruby-难道Lua没有和Ruby的method_missing相媲美的东西吗?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/7732154/

  2. ruby - 如何使用文字标量样式在 YAML 中转储字符串? - 2

    我有一大串格式化数据(例如JSON),我想使用Psychinruby​​同时保留格式转储到YAML。基本上,我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是,当我使用YAML.dump时,它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量?解

  3. ruby-on-rails - rails 目前在重启后没有安装 - 2

    我有一个奇怪的问题:我在rvm上安装了ruby​​onrails。一切正常,我可以创建项目。但是在我输入“railsnew”时重新启动后,我有“程序'rails'当前未安装。”。SystemUbuntu12.04ruby-v"1.9.3p194"gemlistactionmailer(3.2.5)actionpack(3.2.5)activemodel(3.2.5)activerecord(3.2.5)activeresource(3.2.5)activesupport(3.2.5)arel(3.0.2)builder(3.0.0)bundler(1.1.4)coffee-rails(

  4. ruby - 如何在续集中重新加载表模式? - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  5. ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式? - 2

    我正在为一个项目制作一个简单的shell,我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止,我一直在使用CSV::parse_line,将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"

  6. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem,所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  7. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样?我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用,需要1秒才能返回,我有100,000多个页面要访问,所以我试图运行多个线程来解决这个问题。有更好的方法吗?classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  8. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项? - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常,直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  9. 没有类的 Ruby 方法? - 2

    大家好!我想知道Ruby中未使用语法ClassName.method_name调用的方法是如何工作的。我头脑中的一些是puts、print、gets、chomp。可以在不使用点运算符的情况下调用这些方法。为什么是这样?他们来自哪里?我怎样才能看到这些方法的完整列表? 最佳答案 Kernel中的所有方法都可用于Object类的所有对象或从Object派生的任何类。您可以使用Kernel.instance_methods列出它们。 关于没有类的Ruby方法?,我们在StackOverflow

  10. ruby-on-rails - Rails 3,嵌套资源,没有路由匹配 [PUT] - 2

    我真的为这个而疯狂。我一直在搜索答案并尝试我找到的所有内容,包括相关问题和stackoverflow上的答案,但仍然无法正常工作。我正在使用嵌套资源,但无法使表单正常工作。我总是遇到错误,例如没有路线匹配[PUT]"/galleries/1/photos"表格在这里:/galleries/1/photos/1/edit路线.rbresources:galleriesdoresources:photosendresources:galleriesresources:photos照片Controller.rbdefnew@gallery=Gallery.find(params[:galle

随机推荐