webpack - CSS 导出后的 Webpack 4/Font-Awesome 5 $fa-font-path wong
问题描述
我现在正在学习 webpack,但我在使用 webpack 完成的魔法方面遇到了一些麻烦。
我必须将字体真棒字体的路径设置为 node_modules 文件夹,但是在编译过程之后它是错误的。
萨斯文件:
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts/";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/regular.scss";
我必须将 $fa-font-path var 放到 node_modules/ 文件夹中字体的当前位置,否则 webpack 找不到字体并抛出错误。
我的 CSS 文件被导出到:"App/Resources/Public/Css/main.css"
并且 webpack 魔术将 $fa-font-path 更改为我为字体“Fonts/”选择的 outputPath
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 400;
src: url(Fonts/fa-regular-400.eot);
src: url(Fonts/fa-regular-400.eot?#iefix) format("embedded-opentype"), url(Fonts/fa-regular-400.woff2) format("woff2"), url(Fonts/fa-regular-400.woff) format("woff"), url(Fonts/fa-regular-400.ttf) format("truetype"), url(Fonts/fa-regular-400.svg#fontawesome) format("svg"); }
但它应该是“../Fonts”,因为 Css 和 Fonts 文件夹位于同一级别。
我的 webpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const config = {
src: './App/Resources/Private/',
dist: './App/Resources/Public/'
};
module.exports = {
entry: { main: config.src + 'Javascript/app.js' },
output: {
path: path.resolve(__dirname, config.dist),
filename: 'Javascript/[name].[contenthash].js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.scss$/,
use: [ 'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
},
{
test: /\.(eot|woff|woff2|ttf|svg)(\?\S*)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'Fonts/'
}
}]
}
]
},
plugins: [
new CleanWebpackPlugin(config.dist, {} ),
new MiniCssExtractPlugin({
filename: 'Css/[name].[hash].css',
chunkFilename: 'Css/[id].[hash].css'
}),
new HtmlWebpackPlugin({
inject: true,
hash: true,
template: config.src + 'Html/index.html',
filename: 'index.html'
})
]
};
包.json
{
"name": "bootstrapwebpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build:prod": "webpack --mode production",
"build:dev": "webpack --mode development"
},
"author": "",
"license": "ISC",
"dependencies": {
"@fortawesome/fontawesome-free": "^5.4.1"
},
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"autoprefixer": "^9.2.1",
"babel-loader": "^8.0.4",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.4",
"node-sass": "^4.9.4",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.21.0",
"webpack-cli": "^3.1.2"
}
}
我在这里和文档中找到的解决方案对我不起作用。也许你们中的某个人可以提供帮助:) Git Repo 以获得良好的解决方案:https ://gitlab.com/szmedia/bootstrapwebpack
解决方案
问题解决了:
只需将 outputPath 和 publicPath 添加到您的文件加载器,如下所示:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const config = {
src: './App/Resources/Private/',
dist: './App/Resources/Public/'
};
module.exports = {
entry: {
main: config.src + 'Javascript/app.js' ,
sass: config.src + 'Scss/app.scss'
},
output: {
path: path.resolve(__dirname, config.dist),
filename: 'Javascript/[name].[contenthash].js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.scss$/,
use: [ 'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
},
{
test: /\.(eot|woff|woff2|ttf|svg)(\?\S*)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'Fonts/',
publicPath: '../Fonts/'
}
}]
}
]
},
resolve: {
alias: {
jquery: "jquery/src/jquery"
}
},
plugins: [
new CleanWebpackPlugin(config.dist, {} ),
new MiniCssExtractPlugin({
filename: 'Css/[name].[hash].css',
chunkFilename: 'Css/[id].[hash].css'
}),
new HtmlWebpackPlugin({
inject: true,
hash: true,
template: config.src + 'Html/index.html',
filename: 'index.html'
})
]
};
推荐阅读
- reactjs - 如何确保在获取数据之前成功更新数据
- c# - AC# 数据结构,用于保存具有不同于“key”和“value”的标识符的 KeyValue 对
- c# - MVC View Viewmodel HttpPost 返回 NULL
- python - 在 Pandas 中透视包含重复条目的表
- java - 尝试使用 JPA 删除数据库中的 2 行。一个对象是从 id 创建的,但另一个不是
- algorithm - 你会通过双散列算法和二次散列算法得到相同的散列图吗?
- c# - LINQ 查询中的属性反射未按预期运行
- function - Excel 2016:如何*通过键盘*从“建议”下拉列表中选择功能?
- google-cloud-platform - hdfs 相当于 snapdiff 和 Gcloud 中的createsnapshot
- azure-devops - Azure DevOps 连接到远程 Artifactory