2016-06-28 7 views
1

현지 문제 일 수있어서 불편을 드려 죄송합니다. 그러나 그것은 나를 며칠 동안 괴롭 히고있다.webpack 구성으로 material-css를 설정하는 방법은 무엇입니까?

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'