Verwenden Sie font-awesome in einer Vue App erstellt mit vue-cli webpack

Question

Ich versuche, die Schriftart-genial in einer einfachen Vue App mit vue-cli mit dem Webpack-einfache Vorlage erstellt, aber das ist knifflig.

Ich installierte Schriftart-awesome npm install font-awesome --save mit und importiert sie in meinem Eintrag js (main.js)

import Vue from 'vue' 
import App from './App.vue' 
import VueRouter from 'vue-router'; 
import Home from "./components/Home.vue" 

Vue.use(VueRouter); 

import 'font-awesome/css/font-awesome.css'; 

const routes = [ 
    { path: '/', component: Home } 
]; 

const router = new VueRouter({ 
    routes, 
    mode: 'history' 
}); 

new Vue({ 
    el: '#app', 
    router, 
    render: h => h(App) 
}) 

Dies ist meine aktuelle webpack.config.js Datei:

var path = require('path') 
var webpack = require('webpack') 

module.exports = { 
    entry: './src/main.js', 
    output: { 
    path: path.resolve(__dirname, './dist'), 
    publicPath: '/dist/', 
    filename: 'build.js' 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.vue$/, 
     loader: 'vue-loader', 
     options: { 
      loaders: { 
      // Since sass-loader (weirdly) has SCSS as its default parse mode, we map 
      // the "scss" and "sass" values for the lang attribute to the right configs here. 
      // other preprocessors should work out of the box, no loader config like this nessessary. 
      'scss': 'vue-style-loader!css-loader!sass-loader', 
      'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' 
      } 
      // other vue-loader options go here 
     } 
     }, 
     { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.(png|jpg|gif|svg)$/, 
     loader: 'file-loader', 
     options: { 
      name: '[name].[ext]?[hash]' 
     } 
     }, 
     { 
     test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, 
     loader: "url?limit=10000&mimetype=application/font-woff" 
     }, { 
     test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, 
     loader: "url?limit=10000&mimetype=application/font-woff" 
     }, { 
     test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
     loader: "url?limit=10000&mimetype=application/octet-stream" 
     }, { 
     test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
     loader: "file" 
     }, { 
     test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
     loader: "url?limit=10000&mimetype=image/svg+xml" 
     } 
    ] 
    }, 
    resolve: { 
    alias: { 
     'vue$': 'vue/dist/vue.common.js' 
    } 
    }, 
    devServer: { 
    historyApiFallback: true, 
    noInfo: true 
    }, 
    performance: { 
    hints: false 
    }, 
    devtool: '#eval-source-map' 
} 

if (process.env.NODE_ENV === 'production') { 
    module.exports.devtool = '#source-map' 
    // http://vue-loader.vuejs.org/en/workflow/production.html 
    module.exports.plugins = (module.exports.plugins || []).concat([ 
    new webpack.DefinePlugin({ 
     'process.env': { 
     NODE_ENV: '"production"' 
     } 
    }), 
    new webpack.optimize.UglifyJsPlugin({ 
     sourceMap: true, 
     compress: { 
     warnings: false 
     } 
    }), 
    new webpack.LoaderOptionsPlugin({ 
     minimize: true 
    }) 
    ]) 
} 

ich schon versucht, die Font Loader zu ändern:

{ 
    test: /\.(png|jpe|jpg|gif|woff|woff2|eot|ttf|svg)(\?.*$|$)/, 
    loader: 'file-loader', 
    options: { 
     name: '[name].[ext]?[hash]' 
    } 
} 

Aber beide Konfigurationen wirft die gleiche Fehler:

ERROR in ./~/font-awesome/css/font-awesome.css 
Module parse failed: /home/james/projects/app/node_modules/font-awesome/css/font-awesome.css Unexpected character '@' (7:0) 
You may need an appropriate loader to handle this file type. 
| /* FONT PATH 
| * -------------------------- */ 
| @font-face { 
| font-family: 'FontAwesome'; 
| src: url('../fonts/fontawesome-webfont.eot?v=4.7.0'); 
@ ./src/main.js 11:0-43 
@ multi main 

Nach einigen google ich einige Links gefunden (here, here und here zum Beispiel), aber jede von ihnen für mich arbeitet, ist der Fehler immer gleich.

Was ist der empfohlene Loader, um mit font-awesome Dateien umzugehen? Ich denke, das Problem liegt im Loader, weil alle Regex-Ausdrücke für mich gut aussehen.

Informationen, ist unten die Versionen in package.json:

"dependencies": { 
    "bulma": "^0.3.0", 
    "font-awesome": "^4.7.0", 
    "vue": "^2.1.0", 
    "vue-resource": "^1.0.3", 
    "vue-router": "^2.1.1" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.0.0", 
    "babel-loader": "^6.0.0", 
    "babel-preset-es2015": "^6.0.0", 
    "cross-env": "^3.0.0", 
    "css-loader": "^0.25.0", 
    "file-loader": "^0.9.0", 
    "style-loader": "^0.13.1", 
    "vue-loader": "^10.0.0", 
    "vue-template-compiler": "^2.1.0", 
    "webpack": "^2.1.0-beta.25", 
    "url-loader": "^0.5.5", 
    "webpack-dev-server": "^2.1.0-beta.9" 
    } 

Answer 1

Es Sie .css in Ihrer webpack Konfiguration enthalten müssen einen Loader scheint:

{ 
    test: /\.css$/, 
    loader: 'css-loader' 
    },