我试图了解如何在通过 scss 文件加载字体时通过 fontawsome 加载字体:
这是我的 webpack 配置:
const path = require('path');
const webpack = require('webpack');
const UrlLoader = require('url-loader');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
publicFolder = path.resolve(__dirname, 'public');
// appFolder = path.resolve(__dirname, 'app');
module.exports = {
entry: {
// Selects main js file
main: './public/es6/index.js'
},
output: {
// Main path for the js folder
path: path.resolve(__dirname, 'public/js/'),
// Select teh name the main js file (after compression)
filename: 'bundle.js',
// Public path
// publicPath: 'http://localhost:8080',
publicPath: '/public/js/',
// Name the chunkFile (in case of external scripts)
chunkFilename: '[name].[contenthash].js'
},
module: {
rules: [ // Vue Files
{
test: /\.vue$/,
exclude: /node_modules/,
loader: 'vue-loader',
options: {
loader: {
scss: 'vue-style-loader!css-loader!sass-loader',
css: 'vue-style-loader!css-loader'
}
}
},
// JS files
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
// CSS / SASS files
{
test: /\.(sa|sc|c)ss$/,
// test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
url: false,
minimize: true,
sourceMap: true
}
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
minimize: true
}
}
]
},
// Forgot why I need this...
{
test: /\.(png|gif|jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
use: [{
loader: 'url-loader',
options: {
limit: 100000
}
}]
}
]
},
plugins: [
// Load jQuery globally
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
// Hot module
// new webpack.HotModuleReplacementPlugin(),
// BrowserSync: Load page automatically on change
new BrowserSyncPlugin({
proxy: 'https://potato.mywebsite.com/',
port: 3000,
files: [
'**/*.php'
],
ghostMode: {
clicks: false,
location: false,
forms: false,
scroll: false
},
minify: false,
injectChanges: true,
logFileChanges: true,
logLevel: 'debug',
logPrefix: 'webpack',
notify: true,
reloadDelay: 0
}),
// Provides a way to customize how progress is reported during a compilation
new webpack.ProgressPlugin(),
// Loads Vue
new VueLoaderPlugin(),
// For webpack-dev-server (currently not in use)
// new webpack.HotModuleReplacementPlugin(),
// Handle css in different files (scss file in login.js for example to a hashed login.css file)
new MiniCssExtractPlugin({ filename: '../css/[name].css' }),
// CSS assets during the Webpack build and will optimize \ minimize the CSS
new OptimizeCSSAssetsPlugin({}),
// Not sure if needed yet
new webpack.NamedModulesPlugin()
],
devServer: {
// https: true,
headers: { 'Access-Controll-Allow-Origin': '*' },
compress: true,
quiet: true,
hot: true,
inline: true
}
};
这是我加载 FontAwesome(和其他)的 SCSS 文件。
@import 'variable';
// Colors
@import 'colors/default';
@import 'colors/green';
@import 'colors/megna';
@import 'colors/purple';
@import 'colors/red';
@import 'colors/blue';
@import 'colors/blue-dark';
@import 'colors/default-dark';
@import 'colors/green-dark';
@import 'colors/red-dark';
@import 'colors/megna-dark';
@import 'colors/purple-dark';
// Import Bootstrap source files
@import "../../node_modules/bootstrap/scss/bootstrap";
// This is for the icons
@import '../assets/icons/font-awesome/css/fontawesome-all.css';
@import '../assets/icons/simple-line-icons/css/simple-line-icons.css';
@import '../assets/icons/weather-icons/css/weather-icons.min.css';
@import '../assets/icons/themify-icons/themify-icons.css';
@import '../assets/icons/flag-icon-css/flag-icon.min.css';
@import "../assets/icons/material-design-iconic-font/css/material-design-iconic-font.min.css";
// This is the core files
@import 'core/core';
@import 'widgets/widgets';
@import 'responsive';
// In This scss you can write your scss
@import 'custom';
当运行 npm run dev(或其他)时，我没有收到任何提及字体的错误。
当加载我的网站时，我在“网络”面板中得到这些 URLS 引用:
https://mywebsite.potato.com/public/webfonts/fa-regular-400.woff
https://mywebsite.potato.com/public/fonts/Simple-Line-Icons.ttf?-i3a2kk
指向我的目录中甚至不存在的字体文件(或者至少没有创建......)
如何正确加载字体？
编辑:
为@FabioCosta 添加这个
{
test: /\.(png|gif|jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
// name: '[path][name].[ext]',
outputPath: '/public/fonts/',
publicPath: '/public/fonts/'
}
}
]
}
添加完整的模块部分:
module: {
rules: [ // Vue Files
{
test: /\.vue$/,
exclude: /node_modules/,
loader: 'vue-loader',
options: {
loader: {
scss: 'vue-style-loader!css-loader!sass-loader',
css: 'vue-style-loader!css-loader'
}
}
},
// JS files
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
// CSS / SASS files
{
test: /\.(sa|sc|c)ss$/,
// test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
url: false,
minimize: true,
sourceMap: true
}
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
minimize: true
}
}
]
},
{
test: /\.(png|gif|jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
use: [
{
loader: 'file-loader',
options: {
// name: '[path][name].[ext]',
name: '[name].[ext]',
outputPath: '/public/fonts/',
publicPath: '/public/fonts/'
}
}
]
}
尝试以下:https://chriscourses.com/blog/loading-fonts-webpack 似乎不起作用。
添加 CSS 截图
最佳答案
更新
基于 github 文件，您的目标是 php 文件上未更改的 css。那不会被 webpack 解析，移除它。
<link rel="stylesheet" type="text/css" href="css/main.css">
如果你运行 npm run build 你的入口点是 JS 文件，这将是通过 webpack 解析的 JS 文件，它将生成你的所有文件并且需要包含在内。
那么你正在使用mini css extract plugin要将您的 css 复制到某个地方，您需要加载该文件。 根据您当前的配置，它在 css 文件夹上保存了一个级别:
new MiniCssExtractPlugin({ filename: '../css/[name].css' }),
无论此文件输出什么，您都应该加载而不是原始的 main.css，因此根据您当前的文件夹结构，此文件将位于一级 UP 路径上。不在您可能期望的 public/css 中，如果我没有记错的话，如果您使用 ./css/[name].css，它应该输出到您期望的位置。
作为旁注，您似乎对源和输出使用了相同的文件夹。尝试移动到单独的文件夹，这样您就不会不情愿地覆盖任何内容。
最后是字体: loader的测试需要匹配你的字体
src: url("../webfonts/fa-brands-400.eot");
与测试不符:
test: /\.(png|gif|jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
你可能想让最后一部分成为可选的
test: /\.(png|gif|jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)?/,
你的 css-loader 也有 url=false所以字体解析器永远不会被调用。从加载程序中删除 url: false。然后只是一个使用文件加载器选项的例子，你可以改变 public-path转到您存储文件的任何位置，它们将在生成的 css 和 output path 上被替换将它们复制到所需位置。
总结一下:
- 检查您是否正在导入正确的 css 文件，重命名该文件，如果您需要保证，请查看它的位置
- 如果您想要替换 url 和加载程序，请从 css-loader 中删除 url:false 并确保字体文件正则表达式与它们匹配。
- 为避免混淆，将所有输出存储在单独的文件夹中，并检查放在哪里。
第一个答案:
如果您已经在使用 font-awesome 和 webpack，我建议您使用 font-awesome-loader .
那将是加载它们的最简单方法，但更深入的解释是基本上每个文件扩展名 webpack 都需要一个加载器来处理它。它将适本地处理文件并将其内容放在某个地方。
所以让webpack加载fontawesome字体的步骤是:
- 安装 font awesome package在您的项目中(或将 Assets 放在某个固定位置)。
使用如下加载器加载字体文件
module.exports = { module: { loaders: [ // the file-loader will copy the file and fix the appropriate url { test: /\.(ttf|eot|svg|woff(2)?)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader", options: { name: "[name].[ext]", outputPath: "fonts/", publicPath: "../fonts/" } } ] } };从您的 css 上的 font-awesome 加载适当的 CSS/SCSS/LESS。
所以在这部分分析你的代码:
// Forgot why I need this...
{
test: /\.(png|gif|jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
use: [{
loader: 'url-loader',
options: {
limit: 100000
}
}]
}
您决定通过 url-loader 加载所有这些扩展所以它们将成为 base64 URI。
你在这里加载了所有很棒的字体 css
@import '../assets/icons/font-awesome/css/fontawesome-all.css';
如果您检查 CSS，它正在通过给定路径引用文件，并且您选择了 url-loader，因此路径将不匹配。如果更改为 file-loader并使选项与适当的路径相匹配，它会将文件复制到那里，您应该已经准备就绪。
关于javascript - 通过 Webpack 加载 FontAwesome : Fonts do not load，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52704890/