Webpack: Issue loading external css files in production build

Question

I am using webpack to create a production build which will contain minified JS and confined CSS. But when I try to run my build none of the external css sheets load, although build process was successful.

In my resultant build folder all of the assets like css, images are placed on root.

Here is my webpack.production.congig file:

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

module.exports = {
  entry:  __dirname + "/app/index.js",
  output: {
    path: __dirname + "/build",
    filename: "bundle.js"
  },

  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true,
              mozjpeg: {
                progressive: true,
                quality: 65
              },
              // optipng.enabled: false will disable optipng
              optipng: {
                enabled: true,
              },
              pngquant: {
                quality: '65-90',
                speed: 4
              },
              gifsicle: {
                interlaced: false,
              },
              // the webp option will enable WEBP
              webp: {
                quality: 75
              }
            },
          },
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + "/index.tmpl.html"
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new ExtractTextPlugin("style.css")
  ]

}

And here is what my index template look like:

<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="icon" href="./app/resources/images/favicon.ico" />
    <link type="text/css" src="style.css"/>

  </head>
  <body>
    <div id='root'>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

My Build folder's content looks like:

Answer 1

So the problem lies at my webpack configuration where while using css-loader I should have enable modules to true

Here's is updated part of my config.

{
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            {
              loader: "css-loader",
              query: {
                modules: true,
                localIdentName: '[name]__[local]___[hash:base64:5]'
              }
            },
            {
             loader: "postcss-loader",
              options: {
                config: {
                  path: './postcss.config.js'
                }
              }
            }

          ]
        })
      }

Webpack: Issue loading external css files in production build

Question

1 answers

solution1
0 2017-12-09 06:50:18

Webpack: Issue loading external css files in production build

Question

1 answers

solution1 0 2017-12-09 06:50:18

solution1
0 2017-12-09 06:50:18