3

I raised this issue at extract-text-webpack-plugin but it seems this plugin doesn't support this feature at the moment (I'm not sure).

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')
  ]
};
Tien Do
  • 10,319
  • 6
  • 41
  • 42

1 Answers1

1

Webpack creates a bundle per entry, so if you have only the home entry and expect [name].css, you get only home.css. This is what you can do instead:

webpack.config.js

entry: {
  'home': './scripts/home.js',
  'main': './scripts/main.js'
}

and import relevant scss files in both home.js and main.js.

A cleaner solution would be to separate entries for scss and js assets and use array entries:

entry: {
  'home': ['./scripts/home.js', './scss/home.scss'],
  'main': ['./scripts/main.js', './scss/main.scss']
}
Ivan
  • 5,803
  • 2
  • 29
  • 46
  • Surely it works this way, actually I did it before posting this question. Just concerning about the questioned case. – Tien Do Feb 28 '17 at 02:20
  • @TienDo what is exactly your case? A bundle per scss `import` in a javascript file? It would be the opposite of how webpack works. – Ivan Feb 28 '17 at 13:48
  • Yes, I wanted it, but you're right that it's not Webpack way :) – Tien Do Mar 01 '17 at 15:24