Can't extract multiple .css files from a single .js entry (imported multiple .scss files)?

[tiendq]

How can I extract main.scss and home.scss into main.css and home.css in the following example?

Result: There was no error, but only home.css was created.

home.js

import '../scss/main.scss';
import '../scss/home.scss';

main.scss

.test1 { color: #f00; }

home.scss

.test2 { color: #00f; }

webpack.config.js

let webpack = require('webpack');
let ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: 'babel-loader'
    }, {
      test: /\.scss$/,
      use: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
    }]
  },
  entry: {
    'home': './scripts/home.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/static/scripts',
    publicPath: '/static/'
  },
  plugins: [
    new ExtractTextPlugin('../css/[name].css')
  ]
};

[scottdj92]

Use ExtractTextPlugin.extract({use: ['css-loader', 'sass-loader']});

[tiendq]

@scottdj92 What is difference? is mine a short form of yours? And it doesn't work.

[scottdj92]

I'm not sure I can answer this question: @bebraw any input?

[bebraw]

I would do two extract/plugin pairs to deal with it and match the cases separately like in the readme example.

[tiendq]

@bebraw Did you mean Multiple Instances example? Could you give me a bit of webpack config for my case? I guess I need to hard code some file name but it's not a solution, what if I have more Scss files?

Thanks,

[tiendq]

It seems that there is the only way to extract multiple CSS files:

But regardless, the most important thing to grasp is I have 2 separate new ExtractTextPlugin instances—one for styling and one for fonts. You need one new ExtractTextPlugin instance for every separate CSS bundle you want. If you tried to use the same instance for both, the plugin would simply lump those both together.

https://blog.madewithenvy.com/webpack-2-postcss-cssnext-fdcd2fd7d0bd

[bebraw]

Here's the example you requested for.

Can you re-open at Stack Overflow (the issue tracker is not for support) for more input?

[julkue]

This is the issue on StackOverflow created by @tiendq:

https://stackoverflow.com/questions/42478964/cant-extract-multiple-css-files-from-a-single-js-entry-imported-multiple-sc

I'm having the same situation: One entry that imports two SCSS files and I want to export these two SCSS files as separate CSS files. So not bundling CSS files. The filename callback function would be a great place for that, but unfortunately it doesn't pass the original filename, just the getPath() function with whom it's impossible to restore the original filename with replaced .scss with .css.