symfony - VueJS - 如何在没有 vue-fontawesome 的情况下导入 import fontawesome-free 5?
问题描述
我正在将我的一个项目从 AngularJS 转换为 VueJS。我试图弄清楚如何在不使用 vue-fontawesome 的情况下包含@fortawesome/fontawesome-free。我觉得在没有 vue-fontawesome 实现的情况下添加图标更容易(直接从他们的站点示例中复制和粘贴)。
我在我的 main.js 中导入它时遇到问题。这似乎不起作用:
#main.js
import '@fortawesome/fontawesome-free/css/all.css';
所有图标都不起作用。但是,如果我直接在 html 页面上将 fontawesome 5 添加为静态,它们就会显示出来。如何在我的 VueJS 应用程序上使用 vanilla fontawesome 5?
设置:
带有 Encore 的 Symfony 4 (webpack.config.js):
var Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
.addStyleEntry('css/app', './assets/css/app.css')
.addEntry('js/app', './assets/js/main.js')
.enableSassLoader()
.autoProvidejQuery()
// Enable Vue loader
.enableVueLoader()
;
module.exports = Encore.getWebpackConfig();
这是我的 package.json:
{
"devDependencies": {
"@babel/core": "^7.0.0-rc.3",
"@babel/polyfill": "^7.0.0",
"@babel/preset-env": "^7.0.0-rc.3",
"@symfony/webpack-encore": "^0.17.0",
"@vue/cli-plugin-babel": "^3.0.0-rc.3",
"babel-jest": "^23.2.0",
"babel-loader": "^8.0.2",
"less-loader": "^4.1.0",
"node-sass": "^4.9.2",
"sass-loader": "^7.1.0",
"vue-loader": "^14",
"vue-template-compiler": "^2.5.17",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.5.0",
"@fortawesome/fontawesome-svg-core": "^1.2.8",
"@fortawesome/free-solid-svg-icons": "^5.5.0",
"@fortawesome/vue-fontawesome": "^0.1.2",
"axios": "^0.18.0",
"bootstrap": "^4.1.1",
"bootstrap-vue": "^2.0.0-rc.11",
"jquery": "^3.3.1",
"npm": "^6.4.0",
"style-loader": "^0.23.1",
"sweetalert2": "^7.26.12",
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vuelidate": "^0.7.4",
"vuex": "^3.0.1"
}
}
解决方案
推荐阅读
- python - pandas.errors.ParserError:错误标记数据
- javascript - 什么是 Promise<{}>?
- node.js - 如何异步返回 sequelize 实例?
- c# - WPF 资源字体未更新
- ios - 使用 AudioKit 在 UIView 中绘制样本文件的波形
- c# - C#.net 字符串到 Int
- r - R中的网络抓取:模式问题,无法获得所需的输出
- amazon-sagemaker - sagemaker 使用带有 csv 的推理端点调用 curl
- matlab - 使用 Matlab 绘制以平面为界的圆柱体
- laravel - 通过 tinker 访问多对多关系的数据库字段