VueJS 和 FontAwesome 导入 - 未找到模块:错误:无法解析 '@fortawesome/fontawesome-svg-core'
Posted
技术标签:
【中文标题】VueJS 和 FontAwesome 导入 - 未找到模块:错误:无法解析 \'@fortawesome/fontawesome-svg-core\'【英文标题】:VueJS and FontAwesome Import - Module not found: Error: Can't resolve '@fortawesome/fontawesome-svg-core'VueJS 和 FontAwesome 导入 - 未找到模块:错误:无法解析 '@fortawesome/fontawesome-svg-core' 【发布时间】:2020-04-21 11:18:34 【问题描述】:Module not found: Error: Can't resolve '@fortawesome/fontawesome-svg-core' in '/project/src/plugins'
一直在尝试跟进本教程 (https://blog.logrocket.com/full-guide-to-using-font-awesome-icons-in-vue-js-apps-5574c74d9b2d/) 以将我当前的 fontawesome (4.0.7) 升级到我项目中的最新 5.0.12 版本,但一直收到此错误,很明显该项目是找不到库。
我用过
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/vue-fontawesome
src/plugins/font-awesome.js
import Vue from 'vue'
import library from '@fortawesome/fontawesome-svg-core'
import faCoffee from '@fortawesome/free-solid-svg-icons'
import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
library.add(faCoffee)
Vue.component('font-awesome-icon', FontAwesomeIcon)
main.js
/* ============
* Main File
* ============
*
* Will initialize the application.
*/
import Vue from 'vue';
/* ============
* Plugins
* ============
*
* Import and bootstrap the plugins.
*/
import './plugins/vuex';
import './plugins/axios';
import i18n from './plugins/vue-i18n';
import router from './plugins/vue-router';
import './plugins/vuex-router-sync';
import './plugins/bootstrap';
import './plugins/font-awesome';
import './plugins/moment';
import './plugins/vuelidate';
import './plugins/scrollto';
import './plugins/filters';
import './plugins/casl';
// Theme css imports
import './assets/css/application.scss';
/* ============
* Main App
* ============
*
* Last but not least, we import the main application.
*/
import App from './App.vue';
import store from './store';
Vue.config.productionTip = false;
store.dispatch('auth/check');
/* eslint-disable no-new */
new Vue(
/**
* Bind the Vue instance to the html.
*/
el: '#app',
/**
* The localization plugin.
*/
i18n,
/**
* The router.
*/
router,
/**
* The Vuex store.
*/
store,
/**
* Will render the application.
*
* @param Function h Will create an element.
*/
render: h => h(App),
);
其他插件工作正常,该文件夹实际上存在于 node_modules 上。 我应该尝试其他任何方法来解决这个问题吗?
【问题讨论】:
这是他们文档中的错字。 fontawesome 不是 fortawesome。字体不是堡垒。 @KubwimanaAdrien 我希望是,这就是 repo 的实际名称 (github.com/FortAwesome/Font-Awesome) 我刚刚检查了教程你应该将这些包导入你的 main.js 而不是你的 font-awesome.js 现在因为你想使用 font-awesome.js 我假设目录也会改变.也许你需要在路径前加上 ../ 或类似的东西 感谢@laserany,我也试过了,我得到了Module not found: Error: Can't resolve '@fortawesome/fontawesome-svg-core' in '/project/src'
那是main.js
文件夹,它仍然没有找到它。
【参考方案1】:
npm install --save @fortawesome/fontawesome-free
【讨论】:
看cmets这个答案也是错的。【参考方案2】:我遇到了同样的问题
webpack css-loader 不支持 (scss 和 .css 捆绑) 你需要 sass 来做
只需安装 sass-loader 和 node-sass(阅读下面的注释)
npm install -D sass-loader node-sass<----------------see below note before install--------------
网络包
module.exports =
module:
rules: [
test: /\.(sass|scss|css)$/,<-----------------------note placed scss /css---------
use: [
'vue-style-loader',
'css-loader',
'sass-loader'<--------------------this is you need----------------
]
]
,
// plugin omitted
注意:人们在安装 npm install -d sass-loader
时会出错,但是 sass-loader 带来了最新版本的 sass 意味着你得到了 sass-loader:11.0.0 或更高版本,所以 webpack 4 不支持最新版本的 sass-loader.sass 加载器webpack 5 以上为 11。
解决方案
你的 webpack 版本是 4,所以你只需要低于 sass loader 版本 10
npm install -D node-sass
npm install -D sass-loader@^10 <-----------importent step
我的网络包
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const webpack = require('webpack')
module.exports =
entry: './src/main.js',
module:
rules: [
test: /\.js$/,
use: 'babel-loader'
,
test: /\.vue$/,
use: 'vue-loader'
,
test: /\.(sass|scss|css)$/,
use: ['vue-style-loader', 'css-loader','sass-loader'],
,
]
,
devServer:
open: true,
hot: true
,
plugins: [
new HtmlWebpackPlugin(
template: './src/index.html',
),
new VueLoaderPlugin(),
new webpack.HotModuleReplacementPlugin()
],
【讨论】:
以上是关于VueJS 和 FontAwesome 导入 - 未找到模块:错误:无法解析 '@fortawesome/fontawesome-svg-core'的主要内容,如果未能解决你的问题,请参考以下文章