如何使用 webpack 开发服务器包含来自 bower_components 的 CSS? [英] How to include a CSS from bower_components using webpack dev server?
问题描述
我正在使用位于文件夹 bower_components 中的 bower 加载 fe 库.
I am loading a fe library using bower which is situated in folder bower_components.
在 public 文件夹中，我有一个 html 页面，其中应该包含对 fe 库的引用.
In public folder I have an html page which should contain a reference to the fe library.
使用以下代码加载 owfont-regular.css
如何在 webpack 开发服务器中正确加载 css 文件?
How to load the css file correctly in webpack dev server?
<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']
}
}
]
}
}
推荐答案
亲爱的，首先你应该添加一个 css 加载器，你可以通过 npm 安装它，如下命令
dear firstly you should add a css loader, you can install it via npm as the follow commands
npm install style-loader css-loader --save-dev
npm install style-loader css-loader --save-dev
然后将此加载器添加到webpack.config，然后您可以在项目中的任何位置导入您的css文件，例如如果您使用react.js，您可以将其添加为:
从'/assets/bower_components/owfont/css/owfont-regular.css'导入样式
and then add this loader to webpack.config, and then you can import your css file in your project any where, if you use react.js for example you can add it as:
import 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"
}
]
}
这篇关于如何使用 webpack 开发服务器包含来自 bower_components 的 CSS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
