VueJS - Как импортировать импорт без fontawesome 5 без vue-fontawesome? - PullRequest
Новая
       7

VueJS - Как импортировать импорт без fontawesome 5 без vue-fontawesome?

0 голосов
/ 23 ноября 2018

Я конвертирую мой проект из AngularJS в VueJS.Я пытаюсь понять, как включить @ fortawesome / fontawesome-free без использования vue-fontawesome.Я чувствую, что проще добавлять иконки без vue-fontawesome реализации (копирование и вставка непосредственно из примеров их сайтов).

У меня проблемы с импортом в мой main.js.Это не похоже на работу: 

#main.js    
import '@fortawesome/fontawesome-free/css/all.css';

Ни один из значков не работает.Однако, если я добавлю fontawesome 5 непосредственно на html-страницу как статический, они появятся.Как я могу использовать vanilla fontawesome 5 в своем приложении VueJS?

Установка:

Symfony 4 с Encore (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"
    }
}
...