Webpack ExtractTextPlugin - two output files

Question

I need to generate two css files. I tried using

new ExtractTextPlugin(['css/style.css','css/head.css'], { allChunks: true })

in my config and

require('../sass/head.scss');
require('../sass/style.scss');

in my main js file.

Unfortunately, it produces an error. What can I do?

Answer 1

How to export multiple CSS files/ fragments using Webpack 2 and ExtractTextPlugin

Basically all I wanted to do was replicating the standard Compass behavior (which would generate a separate CSS file for each SCSS file that wasn't a partial) and adding PostCSS/Autoprefixer.

The answer by Tomasz finally got me on the right track, still there were some errors:

1. webpack complained about a missing output filename, so I added one
2. after that, it complained about 'multiple assets emitting to the same file'

---

So here's my current webpack.config.js that will autoprefix and generate two separate CSS files:

const ExtractTextPlugin = require("extract-text-webpack-plugin");

// var ExtractCSS = new ExtractTextPlugin('dist/[name].css');
var ExtractCSS = new ExtractTextPlugin('dist/[name]');

module.exports = {
    entry: {
        // style: './src/style.scss',
        // extra: './src/extra.scss'
        'style.css': './src/style.scss',
        'extra.css': './src/extra.scss'
    },
    output: {
        // filename: './dist/[name].js'
        filename: './dist/[name]'
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: ExtractCSS.extract({
                    fallback: "style-loader",
                    use: [
                        "css-loader",
                        "postcss-loader",
                        "sass-loader"
                    ]
                })
            }
        ]
    },
    plugins: [
        ExtractCSS
    ],
    watch: true
};

The key point here was to remove the file extensions from ExtractTextPlugin() and output{} and then adding them to entry{}, otherwise webpack would generate a JS file for each CSS file, i.e. dist/style.js and dist/extra.js.

---

My postcss.config.js, nothing fancy here:

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

---

And finally package.json:

{
    "dependencies": {
    },
    "devDependencies": {
        "css-loader": "^0.26.1",
        "extract-text-webpack-plugin": "^2.0.0-rc.3",
        "node-sass": "^4.5.0",
        "postcss-loader": "^1.3.0",
        "sass-loader": "^6.0.0",
        "style-loader": "^0.13.1",
        "webpack": "^2.2.1",
        "webpack-dev-server": "^2.3.0"
    }
}

---

Hat tip to manubo here and here.

---

Weird glitch: when firing up $ webpack for the first time, I get what would normally be content of build.js appended to each exported CSS file. Triggering a rebuild by making a modification to any of the SCSS files fixes this. If you know, how to solve this, please let me know.

Answer 2

You need two entry points for that:

var styleScss = new ExtractTextPlugin('css/[name].css');

module.exports = {
  entry: {
    style: 'sass/style.scss',
    head: 'sass/head.scss'
  },

  module: {
      {
        test: /\.scss$/,
        loader: styleScss.extract(
          'style-loader',
          'css!sass'
        )
      }
    ]
  },

  plugins: [
    styleScss
  ]
};