Sử dụng phông chữ tuyệt vời trong ứng dụng Vue được tạo bằng webpack vue-cli

Question

Tôi đang cố gắng sử dụng phông chữ tuyệt vời trong ứng dụng Vue đơn giản được tạo bằng vue-cli bằng mẫu webpack-đơn giản, nhưng điều này đang khó khăn.

Tôi đã cài đặt font-tuyệt đẹp bằng những npm install font-awesome --save và nhập khẩu nó trong js entry của tôi (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) 
}) 

Đây là hiện tại tập tin webpack.config.js tôi:

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

Tôi đã đã thử thay đổi trình tải phông chữ thành các phần sau:

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

Nhưng cả hai cấu hình đều ném cùng lỗi:

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 

Sau khi một số google, tôi thấy một số liên kết (here, here và here chẳng hạn), nhưng ai trong số họ làm việc cho tôi, lỗi luôn luôn là như nhau.

Whats là trình tải được đề xuất để xử lý các tệp phông chữ tuyệt vời? Tôi nghĩ rằng vấn đề là trong bộ nạp, bởi vì tất cả các biểu thức regex trông tốt với tôi.

Để biết thông tin, dưới đây là các phiên bản trong 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

Có vẻ như bạn cần phải bao gồm một bộ nạp cho .css trong cấu hình webpack của bạn:

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