Webpack ExtractTextPlugin - two output files

Question

I need to generate two css files. I tried to use

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

in my configuration and

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

in my main js file.

Unfortunately, this leads to an error. What can I do?

Answer 1

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

Basically, all I wanted to do was replicate the standard Compass behavior (which would create a separate CSS file for each SCSS file that would not be partial) and add PostCSS / Autoprefixer.

Tomasz's answer finally got me on the right track, yet there were some errors:

• webpack complained about the missing output file name, so I added one
• " , "

---

, webpack.config.js, CSS:

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
};

ExtractTextPlugin() output{}, entry{}, webpack JS CSS, dist/style.js dist/extra.js.

---

postcss.config.js, :

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

---

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"
    }
}

---

manubo .

---

Weird glitch: $ webpack, , build.js, CSS. SCSS . , , .

Answer 2

:

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
  ]
};