简体   繁体   English

Bootstrap-SASS Glyphicons不使用Webpack Build进行渲染

[英]Bootstrap-SASS Glyphicons Not Rendering With Webpack Build

I am using Webpack + NPM to build my app and having trouble with Bootstrap-SASS Glyphicons rendering on a production server. 我正在使用Webpack + NPM构建我的应用程序,并且在生产服务器上渲染Bootstrap-SASS Glyphicons时出现问题。 Locally the Glyphicons render fine. 当地的Glyphicons渲染得很好。

In Chrome , I get the following Chrome中 ,我得到以下内容

Failed to decode downloaded font: http://app.azurewebsites.net/build448c34a56d699c29117adc64c43affeb.woff2
OTS parsing error: invalid version tag
Failed to decode downloaded font: http://app.azurewebsites.net/buildfa2772327f55d8198301fdb8bcfc8158.woff
OTS parsing error: invalid version tag
Failed to decode downloaded font: http://app.azurewebsites.net/builde18bbf611f2a2e43afc071aa2f4e1512.ttf
OTS parsing error: invalid version tag

Below are some relevant files. 以下是一些相关文件。 I've looked around but has not been able to find a solution. 我环顾四周但一直无法找到解决方案。 Please let me know if you have any ideas. 如果您有任何想法,请告诉我。 Thanks 谢谢

SCSS File SCSS文件

$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';

@import '~bootstrap-sass/assets/stylesheets/_bootstrap.scss';

Webpack 的WebPack

var path = require('path');
var buildPath = "./build";

var webpack = require('webpack')

module.exports = {
  entry: "./src/entry.js",
  output: {
    path: buildPath,
    publicPath: buildPath,
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style-loader!css'},
      {test: /\.scss$/, loader: 'style-loader!css!sass'},
      // { test: /.woff2?(\?v=\d+.\d+.\d+)?$/, loader: "url?limit=10000&minetype=application/font-woff" },
      {test: /\.(png|jpg|svg|woff|woff2)?(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?limit=8192'},
      {test: /\.(eot|ttf)$/, loader: 'file-loader'}
    ]
  }
};

NPM NPM

"dependencies": {
    "bootstrap-sass": "^3.3.6",
    "node-sass": "^3.4.2",
    "file-loader": "^0.8.5",
    "css-loader": "^0.21.0",
    "sass-loader": "^3.1.2",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.2"
}

Found a solution. 找到了解决方案。 I fixed this issue by specifying an absolute url for the path by doing the following: 我通过执行以下操作为path指定绝对URL来解决此问题:

output: {
    path: path.resolve(__dirname, "build"),
    publicPath: "build/",
    filename: "bundle.js"
  }

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM