2016-06-28 9 views
1

ローカルな問題の可能性があるため、残念です。しかし、それは数日間私を悩ませている。ここでwebpack設定でmaterial-cssを設定するには?

は私のWebPACKの設定です:

var path = require('path'); 
var webpack = require('webpack'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: './src/main.js', 
    output: { 
     path: path.resolve(__dirname, './dist'), 
     publicPath: 'dist/', 
     filename: 'build.js' 
    }, 
    resolveLoader: { 
     root: path.join(__dirname, 'node_modules'), 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.vue$/, 
       loader: 'vue' 
      }, 
      { 
       test: /\.js$/, 
       loader: 'babel?{"presets":["es2015"]}', 
       exclude: /node_modules/ 
      }, 
      { 
       test: /\.css$/, 
       loader: ExtractTextPlugin.extract(
        "style-loader", "css-loader?sourceMap!postcss-loader") 
      }, 
      { 
       test: /\.(jpg|png|gif)$/, 
       loader: "file-loader?name=images/[hash].[ext]" 
      }, 
      { 
       test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
       loader: "url-loader?limit=10000&minetype=application/font-woff" 
      }, 
      { 
       test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
       loader: "file-loader" 
      } 
     ] 
    }, 
    vue: { 
     loaders: { 
      css: ExtractTextPlugin.extract("css"), 
     } 
    }, 
    plugins: [ 
     new ExtractTextPlugin("style.css", { 
      allChunks: true, 
      disable: false 
     }), 
     new webpack.ProvidePlugin({ 
      $: 'jquery', 
      jQuery: 'jquery', 
      'window.jQuery': 'jquery', 
     }) 
    ], 
    devtool: '#eval-source-map' 
} 

と私のmain.js:

import './libs/materialize/js/materialize.js' 
import './libs/materialize/css/materialize.css' 

すべては大丈夫ですが、私はクロームのコンソールをチェックアウトするとき、それはこの私に語った:

localhost/:13 GET http://localhost:3000/dist/dist/2751ee43015f9884c3642f103b7f70c9.woff2 
localhost/:13 GET http://localhost:3000/dist/dist/ba3dcd8903e3d0af5de7792777f8ae0d.woff 
localhost/:13 GET http://localhost:3000/dist/dist/df7b648ce5356ea1ebce435b3459fd60.ttf 

皆さん、お手伝いできますか?本当にありがとう。

+0

これらはすべてうまく動作するはずのフォントファイルです –

答えて

0

このような定義をインポートする必要があります。

import 'materialize-css/dist/js/materialize.min.js' 
import 'materialize-css/dist/css/materialize.min.css'