如何配置webpack加载导入css文件的css？

Question

我使用的WebPack从节点模块onsenui加载CSS文件：

require('onsenui/css/onsenui.css'); 
require('onsenui/css/onsen-css-components.css'); 

文件onsenui/CSS/onsenui.css确实进口相对的CSS文件：

@import url("font_awesome/css/font-awesome.min.css"); 
@import url("ionicons/css/ionicons.min.css"); 
@import url("material-design-iconic-font/css/material-design-iconic-font.min.css"); 

随着一个webpack配置如下：

module: { 
loaders: [ 
    { 
    test: /\.js$/, 
    loaders: [ 'babel' ], 
    exclude: /node_modules/, 
    include: __dirname 
    }, 
    { 
    test: /\.css?$/, 
    loaders: [ 'style', 'css'], 
    include: __dirname 
    } 
] 
} 

但是我g等浏览器中的以下错误：

http://localhost:9001/font_awesome/css/font-awesome.min.css Failed to load resource: the server responded with a status of 404 (Not Found) 
http://localhost:9001/material-design-iconic-font/css/material-design-iconic-font.min.css Failed to load resource: the server responded with a status of 404 (Not Found) 
http://localhost:9001/ionicons/css/ionicons.min.css Failed to load resource: the server responded with a status of 404 (Not Found) 

是否CSS-装载机无法处理@import报表？我应该如何解决@import url(...)阶段的加载？我can'r从node_modules重写CSS文件...

Answer 1

解决：CSS-装载机做处理@import url(...)声明，我忽略了，有多个webpack.config.js文件...

我现在有另外一个问题与字体加载，不得不增加一个额外的规则：

loaders: [ 
    { 
     test: /\.css?$/, 
     loaders: [ 'style', 'css' ], 
    }, 
    { 
     test : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, 
     loader : 'file-loader' 
    } 
] 

Answer 2

我有同样的问题，而webpacking onsenui的三网融合要解决这个问题，我不得不告诉的WebPack通过文件加载器加载字体，为Serge van den Oever answered，但采用提供的新方法10在这个答案时。

此外，我不得不从加载器列表中删除'样式加载器'为CSS，作为explained here。

下面，我最后webpack.config.js

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

module.exports = { 
    entry: './app/index.js', 
    output: { 
    filename: 'bundle.js', 
    path: path.resolve(__dirname, 'lib') 
    }, 
    module: { 
    rules: [{ 
     test: /\.css$/, 
     use: ExtractTextPlugin.extract({ 
     use: [ /*'style-loader',*/ 'css-loader' ] 
     }) 
    },{ 
     test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, 
     use: [ 'file-loader' ] 
    }] 
    }, 
    plugins: [ 
    new ExtractTextPlugin('styles.css'), 
    ] 
}; 

因此，bundle.js，style.css文件，以及大量的字体文件被lib目录中创建。

HTH