如何使用webpack dev服務器從bower_components包含CSS？

我正在使用位於文件夾bower_components中的bower加載一個fe庫。如何使用webpack dev服務器從bower_components包含CSS？

在public文件夾我有應包含鐵庫的引用的HTML頁面。

使用下面的代碼，我得到404裝載owfont-regular.css

如何正確加載CSS文件中的WebPack開發服務器是什麼時候？

<body> 
    <div id="root"></div> 
    <script src="/assets/bundle.js"></script> 
    <link href="/assets/bower_components/owfont/css/owfont-regular.css" rel="stylesheet" type="text/css"> 
</body> 



const path = require('path') 
const webpack = require('webpack') 

module.exports = { 
    entry: { 
    index: './src/index.js' 
    }, 
    output: { 
    path: path.resolve(__dirname, 'public'), 
    publicPath: '/assets/', // virtual 
    filename: 'bundle.js' 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin() 
    ], 
    devServer: { 
    contentBase: path.resolve(__dirname, 'public'), 
    publicPath: '/assets/', // virtual 
    port: 8080, 
    hot: true, 
    inline: true 
    }, 
    devtool: 'source-map', 
    // devtool: 'eval-source-map', 
    module: { 
    loaders: [ 
     { 
     test: /\.(js|jsx)$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     query: { 
      plugins: ['recharts'], 
      presets: ['es2015'] 
     } 
     } 
    ] 
    } 
}

來源

2017-05-21 Radex

親愛首先你應該添加一個CSS加載器，您可以通過NPM作爲後續命令

NPM安裝風格裝載機CSS加載器安裝--save-dev的

然後將這個加載器添加到webpack.config中，然後你可以在你的項目中任何地方導入你的css文件，例如，如果你使用react.js，例如你可以將它添加爲：
i mport style from'/assets/bower_components/owfont/css/owfont-regular.css'

module: { 
    loaders: [ 
     { 
     test: /\.(js|jsx)$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     query: { 
      plugins: ['recharts'], 
      presets: ['es2015'] 
     } 
     }, 
     { 
     test: /\.css$/, 
     loader: "style-loader!css-loader" 
     } 
    ] 
}

來源

2017-05-21 08:52:14

如何使用webpack dev服務器從bower_components包含CSS？

回答

相關問題