在webpack中加載.otf字體文件的正確方法是什麼？

使用webpack時加載.otf字體文件的適當方式是什麼？我曾多次嘗試包括在我的webpack.config.js的規則，沒有任何成功的基礎上，很多例子我大致如下的線路看出：對於在webpack中加載.otf字體文件的正確方法是什麼？

{ test: /\.(eot|svg|ttf|otf|woff)$/, use: 'file-loader' } 
//or 
{ test: /\.(eot|svg|ttf|otf|woff)$/, use: 'url-loader' } 
//or 
{ test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, use: 'file-loader' } 
//...etc

我已經在我的webpack.config.js設置以下其他文件類型，這是成功的工作：

module.exports = { 
    //... 
     module: { 
     rules: [ 
      { test: /\.(js)$/, use: 'babel-loader' }, 
      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}, 
      { test: /\.(jpe?g|png|gif|svg|xml)$/i, use: 'file-loader'} 
     ] 
     }, 
    //... 
}

儘管我的各種嘗試添加另一個規則/案例雜項文件的文件，我總是得到以下錯誤：

Module parse failed: .../fonts/[name-of-my-font].otf Unexpected character ' ' (1:4) You may need an appropriate loader to handle this file type.

我已在我的根目錄下的文件夾fonts的雜項文件文件，並在我的index.css我：

@font-face { 
    font-family: 'name-of-my-font'; 
    src: url('fonts/name-of-my-font.otf'), 
    format('opentype'); 
}

任何人都經歷了類似的問題，並發現了一個解決方案？

感謝，奧斯汀

根據註釋要求更多我webpack.config.js文件，這裏是我的整個webpack.config.js：

var path = require('path'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: './app/index.js', 
    output: { 
    path: path.resolve(__dirname, 'dist'), 
    filename: 'index_bundle.js', 
    publicPath: '/' 
    }, 
    module: { 
    rules: [ 
     { test: /\.(js)$/, use: 'babel-loader' }, 
     { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}, 
     { test: /\.(jpe?g|png|gif|svg|xml)$/i, use: 'file-loader' } 
    ] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     template: 'app/index.html' 
    }) 
    ] 
};

來源

2017-07-11 user3145115

你可以從你的webpack配置中分享你完整的'module.loaders'嗎？ – Bulkan

@Bulkan我已經修改了我的問題，在最後包含了我完整的'webpack.config.js'。這有幫助嗎？ – user3145115

你確定你已經安裝了url-loader和file-loader？ –

我加

{  
    test: /\.(woff|woff2|eot|ttf|otf)$/, 
    loader: "file-loader" 
    }

我webpack.config。 JS。我想我需要顯式地鏈接到文件加載器的類型。我正在使用默認的VS2017 Angular項目。

來源

2017-10-19 04:14:57 RichyRoo

在我webpack.config.js我：

{ 
    test: /\.(woff|woff2|eot|ttf|otf)$/, 
    use: "file-loader" 
}

然後在我的index.js文件我有：

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import { injectGlobal } from 'styled-components'; 
import avenir from '../font/AvenirLTStd-Light.otf'; 
injectGlobal` 
    @font-face { 
     font-family: 'Avenir'; 
     src: url(${avenir}) format('opentype'); 
     font-weight: normal; 
     font-style: normal; 
    } 

    * { 
     font-family: 'Avenir', sans-serif; 
    } 
`; 

import App from './components/App'; 

ReactDOM.render(
    <App /> 
    , document.querySelector('#root') 
);

從styled-使用injectGlobal幫手組件庫會自動將樣式注入到您的css文件中。您可以將風格化的組件移動到單獨的.js文件中，然後導入它。

來源

2017-12-19 02:04:04 user2465134

在webpack中加載.otf字體文件的正確方法是什麼？

回答

相關問題