How to include a CSS from bower_components using w

2019-09-16 07:14发布

I am loading a fe library using bower which is situated in folder bower_components.

In public folder I have an html page which should contain a reference to the fe library.

Using the following code I get 404 when loading owfont-regular.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']
        }
      }
    ]
  }
}

1条回答
再贱就再见
2楼-- · 2019-09-16 07:44

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

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"
      }
   ]
 } 
查看更多
登录 后发表回答