Webpack loading Angular2材料设计css

我有问题加载CSS，包含eot到主scss文件。它看起来像webpack没有使用正确的加载程序的eot文件。如何找到/解决这个问题？Webpack loading Angular2材料设计css

我webpack.dev.js：

entry: { 
    main: [ 
     'webpack-dev-server/client?http://localhost:3000', 
     './src/main' 
    ], 
    vendor: [ 
     'es6-shim', 
     'angular2/bundles/angular2-polyfills', 
     'angular2/common', 
     'angular2/core', 
     'angular2/platform/browser', 
     'angular2/router', 
     'firebase', 
     'immutable', 
     'rxjs', 
     'ng2-material/dist' 
    ] 
    }, 

    output: { 
    filename: '[name].js', 
    path: path.resolve('./target'), 
    publicPath: '/' 
    }, 

    resolve: { 
    extensions: ['', '.ts', '.js'], 
    modulesDirectories: ['node_modules'], 
    root: path.resolve('./src') 
    }, 

    module: { 
    loaders: [ 
     {test: /\.html$/, loader: 'raw'}, 
     {test: /\.scss$/, include: [path.resolve(__dirname, 'src/components')], loader: 'raw!postcss-loader!sass'}, 
     {test: /\.scss$/, include: [path.resolve(__dirname, 'src/styles')], loader: 'style!css!postcss-loader!sass'}, 
     {test: /\.ts$/, exclude: [/\.spec\.ts$/, /node_modules/], loader: 'ts'}, 
     {test: /\.css$/, loader: 'style!css'}, 
     {test: /\.ttf|eot|svg|woff$/, loader: 'file-loader' } 
    ],

我导入CSS在我style.scss文件：

@import 
"~ng2-material/dist/ng2-material.css", 
"~ng2-material/dist/font.css";

而且我得到这个错误：

[WDS] Errors while compiling. 
client?843a:47./~/ng2-material/dist/MaterialIcons-Regular.eot 
Module parse failed: d:\Software Development\Ironing\node_modules\ng2-material\dist\MaterialIcons-Regular.eot Line 1: Unexpected token ILLEGAL 
You may need an appropriate loader to handle this file type. 
(Source code omitted for this binary file) 
@ ./~/css-loader!./~/ng2-material/dist/font.css 6:133-171

来源

2016-03-02 Alexander Zhidkov

请参阅此页面中的配置https://github.com/ghillert/angular2-webpack-starter-bootstrap，您需要添加这些扩展所需的加载程序。 –

Eric，但我指定了文件加载器{test：/\.ttf|eot|svg|woff$/，loader：'file-loader'}？无论如何，感谢您的链接，我会稍后再试。 –

在webpack.config.js里面试试这个：

{ 
    test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, 
    loader: "url?limit=10000&minetype=application/font-woff" 
    }, { 
    test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, 
    loader: "url?limit=10000&minetype=application/font-woff" 
    }, { 
    test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
    loader: "url?limit=10000&minetype=application/octet-stream" 
    }, { 
    test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
    loader: "file" 
    }, { 
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
    loader: "url?limit=10000&minetype=image/svg+xml" 
    }

来源

2016-10-16 08:31:40

Webpack loading Angular2材料设计css

回答

相关问题