CODEWITHSUNDEEP
javascriptwebpackwebpack-dev-serveryarnpkgwebpack-style-loader
Murdock
Murdock

Reputation: 4662

Webpack not copying css into dist

I have the following css files:

<link rel="stylesheet" href="style/select.css">
<link rel="stylesheet" href="style/site.css">

and the following webpack config

var path   = require("path");
module.exports = {
  entry: {
    app: './src/index.js'
  },

  output: {
    path: path.resolve(__dirname + '/dist'),
    filename: '[name].js',
  },

  module: {
    rules: [
      {
        test: /\.(css|scss)$/,
        use: [
          'style-loader',
          'css-loader',
        ]
      },
      {
        test:    /\.html$/,
        exclude: /node_modules/,
        loader:  'file-loader?name=[name].[ext]',
      },
      {
        test:    /\.elm$/,
        exclude: [/elm-stuff/, /node_modules/],
        loader:  'elm-webpack-loader?verbose=true&warn=true',
          options: {debug: true, warn: true},
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=10000&mimetype=application/font-woff',
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader',
      },
    ],

    noParse: /\.elm$/,
  },

  devServer: {
    inline: true,
    stats: { colors: true }
  },
  resolve: {
    mainFields: [ 'main'],
  }
};

when I use webpack-dev-server, the in memory file server seems to have the correct css files. However when I call

yarn build

it does not copy the css files in my dist folder and therefore fails to load the css files.

Upvotes: 5

Views: 5601

Answers (2)

danielpqe
danielpqe

Reputation: 1

Try this config to webpack 4, For loader:

use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: {modules:true, importLoaders: 1 } },
          { loader: 'postcss-loader', options: {
              ident: 'postcss',
              plugins: () => [
                postcssPresetEnv(/* pluginOptions */)
              ]
            } }
        ]

For plugin section:

 new MiniCssExtractPlugin({
      filename: '[name].css' }),

Upvotes: 0

Giacomo Cosimato
Giacomo Cosimato

Reputation: 635

Are you importing the css files in your modules? I think you need to use the ExtractTextWebpackPlugin which extract the css from the js bundle into a separate css file.

This will not work with webpack-dev-server though, so you need to disable the plugin in the configuration that you use for the dev server. There is an option that allows you to do that:

  new ExtractTextPlugin({
    filename: '[name].css',
    disable: true,
  }),

Upvotes: 1

Related Questions