我试图了解在通过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
}
};
这是我的SCSS文件,我在其中加载FontAwesome(和其他文件)。
@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屏幕截图
答案 0 :(得分:2)
更新
基于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我没记错的话,它应该输出到您期望的位置。
在这里,请注意,似乎您正在使用同一文件夹作为源和输出。尝试移动到单独的文件夹中只是为了避免不必要地覆盖任何内容。
最后是字体: 加载程序的测试需要匹配您的字体
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,因此字体解析器将永远不会被调用。从加载程序中删除网址:false。这只是使用文件加载器选项的一种情况,您可以将public-path更改为存储文件的位置,然后将它们替换为生成的CSS ,然后output path将其复制到所需位置。
总结一下:
第一个答案:
如果您已经在使用font-awesome和webpack,我建议您使用font-awesome-loader。
那是加载它们的最简单方法,但是更深入的解释是,基本上对于每个文件扩展名webpack都需要一个加载器来处理它。它将适当地处理文件并将其内容放置在某处。
因此,使webpack加载字体很棒的步骤是:
使用如下所示的加载器加载字体文件
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 CSS
@import '../assets/icons/font-awesome/css/fontawesome-all.css';
如果检查CSS,它将通过给定路径引用文件,然后选择url-loader,因此路径将不匹配。如果您更改为file-loader并使选项与相应的路径匹配,它将复制文件到那里,并且应该都准备好了。
答案 1 :(得分:0)
我刚刚这样发布了detailed answer on another similar question。这可能会为您提供帮助,并且还包括另一个将FontAwesome5与SVG + JS一起使用的新方法的解决方案。这样,就不需要字体文件,Webpack加载器等了。JavaScript
代码中仅需多几行。
(我希望发布这样的答案不违反规则。那是篇很长的文章,我不想复制粘贴。我应该吗?我不认为重复标记可以在这里使用...)