[英]webpack not loading @font-face
在我的 React 應用程序中,我正在實現服務器端渲染,因此由於性能問題,我不想在服務器端添加node_modules
。但我希望來自css
的node_modules
用作 UI 工具包庫。所以我使用了 webpack nodeExternal in我的webpack.server.config文件就像
const path = require('path');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.js');
const nodeExternals = require('webpack-node-externals')
let test = {
test: /\.css$/,
loader: 'css/locals?module&localIdentName=[name]__[local]___[hash:base64:5]'
}
const config = {
target:'node',
entry: './src/index.js',
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'build')
},
externals: [nodeExternals({
whitelist: [/\.(?!(?:jsx?|json)$).{1,5}$/i]
})]
}
module.exports = merge(baseConfig,config)
在這里webpack添加 ZC7A628CBA22E28EB17B5F5C6AE2A266AZ 文件,但它沒有從我的 node_modules UI 工具包文件中加載@font-face。如果我從webpack.server.config文件中刪除nodeExternal ,那么一切都很好,但工作bundle.js
的大小會增加。
我已經在我的webpack.base.config文件中添加了字體規則
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CSSExtract = new ExtractTextPlugin('styles.css');
module.exports ={
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.s?css$/,
use: CSSExtract.extract({
use: [
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
})
},{
test: /\.(gif|svg|jpg|png|ttf|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,
loader: 'url-loader?limit=100000&name=fonts/[name].[ext]'
}
],
},
devtool: 'inline-source-map',
plugins: [
CSSExtract
]
}
我也嘗試使用file-loader
但同樣的問題
它向我顯示錯誤
@字體臉{
^
SyntaxError:無效或意外的令牌
如何使用 @font-face 從 node_modules 添加 ZC7A628CBA22E28EB17B5F5C6AE2A266AZ 文件
這是 webpack 設置:
{
test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[contenthash].[ext]",
outputPath: "fonts/",
},
},
],
},
然后你必須將它們導入 ZC7A628CBA22E28EB17B5F5C6AE2A266AZ 或 scss 主文件。
@font-face {
font-family: "Montserrat";
src: url("../../assets/fonts/Montserrat-Light.ttf");
font-weight: lighter;
font-style: normal;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.