Webpack extract text plugin separate CSS files for header, footer ect

[Mildred]

Hi Guys,

So I am just need to break my styles out into separate files, here is the relevant section of my webpack config.

// https://github.com/halt-hammerzeit/webpack-isomorphic-tools
var WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
var webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools'));   
var extractHeaderStyles = new ExtractTextPlugin('header.css');
var extractAllStyles = new ExtractTextPlugin('all.css');
var extractAppStyles = new ExtractTextPlugin('app.css');

//loaders
{ test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true') },
{ test: /App\.scss/, loader: extractAppStyles.extract('style', 'css?modules&importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true') },
{ test: /Header\.scss/, loader: extractHeaderStyles.extract('style', 'css?modules&importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true') }

//plugins
extractHeaderStyles,
extractAppStyles

It all makes perfect sense, instantiate with file name, hand matched files, hand loader and it spits it out but its not working. Weirdly enough, the file is created (Header.css for example) but all of the styles are being stashed there.

I appear to still need the generic /.scss$ rule or files encountered error upon encountering an ‘@import’. I don’t really understand at this point, the documentation is not great, I am pretty sure this should be working

[Mildred]

I got this working, not too happy with how unintuitive it is but it works. All this webpack stuff is a little hard to get your head around, its amazing everything works at the end of it.

Basically, I cant seem to find a way to get granular control like I was wanting but you can easily split out your files by creating entry points:

  entry: {
    'header': [
        './src/components/Header/Header.scss'
    ],  
    'master': [
      './src/client.js'
    ]   
  }

and rely on webpack to name them:

  plugins: [
    new ExtractTextPlugin('[name].css'),
]

The name will be that of the entry point. Hope this helps someone.

In this example, i get header.css with just the header styles and a master.css with everything client.js pulls in.