VueJS和FontAwesome Import -模块未找到：错误：无法解析“@ fortawesome-svg-core”

8ljdwjyq 于 2023-05-18 发布在 Vue.js

关注(0)|答案(4)|浏览(185)

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版本，但不断得到这个错误，很明显，项目没有找到lib。
我以前

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上。还有什么其他方法可以解决这个问题吗？

vue.js

来源：https://stackoverflow.com/questions/59569315/vuejs-and-fontawesome-import-module-not-found-error-cant-resolve-fortawes

4条答案

按热度按时间

elcex8rz1#

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons

这对我很有效

赞(0）回复(0）举报 2023-05-18

bf1o4zei2#

我也有同样的问题
webpack css-loader不支持**（scss和.css捆绑）**你需要sass来做
只需安装sass-loader和node-sass（阅读下面的注解）

npm install -D sass-loader node-sass<----------------see below note before install--------------

Webpack

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-loader的最新版本意味着你得到的sass-loader：11.0.0或更高版本，所以webpack 4不支持最新的sass-loader。
解决方案
你的webpack版本是4所以你只需要下面的sass loader版本10

npm install -D node-sass
npm install -D sass-loader@^10 <-----------importent step

我的webpack

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()
    ],

}

赞(0）回复(0）举报 2023-05-18

zz2j4svz3#

/* import all icons (solid) using fas */
import {fas } from '@fortawesome/free-solid-svg-icons'

library.add(fas)

赞(0）回复(0）举报 2023-05-18

k75qkfdt4#

npm install --保存@fortawesome/fontawesome-free

赞(0）回复(0）举报 2023-05-18

我来回答

VueJS和FontAwesome Import -模块未找到：错误：无法解析“@ fortawesome-svg-core”

4条答案

相关问题

热门标签

最新问答