CODEWITHSUNDEEP
webpackextract-text-pluginextracttextwebpackplugin
Liran H
Liran H

Reputation: 10569

Webpack Extract Text Plugin: how to test for specific file and extract to separate output?

The normal way to use the Webpack Extract Text Plugin is as follows:

const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  entry: {
    // ...
  },
  output: {
    // ...
  },
  module: {
    rules: [
      // ...
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    // ...
    new ExtractTextPlugin('path/to/style.css')
  ]
}

This of course works well.

The issue I'm facing is when trying to test for different path patterns, and outputting to different locations.

In my case, I'm trying to:

Based on my understanding from the documentation, the following should work, but it doesn't.

const ExtractTextPlugin = require('extract-text-webpack-plugin')

const allSCSS = new ExtractTextPlugin('example/style.css')
const baseSCSS = new ExtractTextPlugin('main/base.css')

module.exports = {
  entry: {
    // ...
  },
  output: {
    // ...
  },
  module: {
    rules: [
      // ...
      {
        test: /\.scss$/,
        use: allSCSS.extract({
        fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      },
      {
        test: /_base\.scss$/,
        use: baseSCSS.extract({
        fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      },
    ]
  },
  plugins: [
    // ...
    allSCSS,
    baseSCSS
  ]
}

When I run this, all I get as output is the 'example/style.css' with all the styles, but not the 'main/base.css'.

Can anyone explain the correct way to do this please?

Upvotes: 0

Views: 506

Answers (1)

Sakhi Mansoor
Sakhi Mansoor

Reputation: 8102

Please make following changes in your webpack config::

const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  entry: {
    // ...
  },
  output: {
    // ...
  },
  module: {
    rules: [
      // ...
      {
        test: /\.scss$/,
       loader: ExtractTextPlugin.extract("style-loader", "sass-loader")
      },

    ]
  },
  plugins: [
    // ...
     new ExtractTextPlugin("style.css")
  ]
}

Install style-loader and sass-loader first. and you don't need to make different css files.

EDITED Please do the following changes to generate these two css files:

const allSCSS = new ExtractTextPlugin('all.css')
const baseSCSS = new ExtractTextPlugin('base.css')

With that configuration in place, two separate CSS files: all.css and base.css will be generated.

Let me know if it doesn't resolve your issue.

Upvotes: 0

Related Questions