如何配置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