使用フォント-素晴らしいVUE-CLIで作成VueのアプリでのWebPACK

Question

私はフォント素晴らしいVUE-CLIはWebPACKの-単純なテンプレートを使って作成した簡単なVueのアプリでを使用しようとしているが、これはトリッキーされています。

私はnpm install font-awesome --saveを使用してフォント-awesomeがインストールされ、これが私の現在のwebpack.config.jsファイルである私のエントリー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) 
}) 

でそれをインポート：

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 
    }) 
    ]) 
} 

私はすでにフォントローダーを次のように変更してみてください。

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

どちらの設定でも、同じエラー：一部のGoogleの後

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 

が、私はいくつかのリンク（例えばhere、hereとhere）を見つけましたが、それらのいずれかが私のために働く、エラーは常に同じです。

いただきましフォント素晴らしいファイルに対処するための推奨ローダーがありますか？私はすべての正規表現が私にはうまく見えるので、問題はローダーにあると思う。以下の情報について

は、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

あなたがあなたのWebPACK構成で.cssためのローダーを含める必要がありそうです：

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