如何使用webpack配置設置material-css？

不好意思，因爲這可能是一個本地問題。但幾天來一直困擾着我。如何使用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

你們能幫我嗎？十分感謝。

來源

2016-06-28 Sid Kwok

這些是字體文件一切都應該工作正常 –

您必須像這樣導入定義。

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

來源

2016-11-12 16:24:59

如何使用webpack配置設置material-css？

回答

相關問題