Webpack Extract-Text-Plugin Output Multiple CSS Files (Both Minified and Not Minified)

Question

I write style in SCSS, and I want to use webpack to build both minified and not minified css files. So I set my webpack.config.js:

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

const extractSASS = new ExtractTextPlugin('assets/styles/[name].css');
const extractMiniSASS = new ExtractTextPlugin('assets/styles/[name].min.css');

module.exports = {
    entry: './Scripts/main.js',
    output: { path: path.resolve(__dirname, 'wwwroot/'), filename: 'scripts/bundle.js' },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: extractSASS.extract({
                    use: ['css-loader', 'sass-loader'],
                }),
            },
            {
                test: /\.scss$/,
                use: extractMiniSASS.extract({
                    use: [{ loader: 'css-loader', options: { minimize: true } }, 'sass-loader'],
                }),
            },
            {
                test: /\.js$/,
                use: [{ loader: 'babel-loader', options: { presets: ['es2015'] } }],
            },
        ],
    },
    plugins: [new webpack.optimize.UglifyJsPlugin(), extractSASS, extractMiniSASS],
};

But after I run npm run build, I get some errors:

ERROR in ./SCSS/main.scss
Module build failed:
$primary_color: #99dd00;
^
      Invalid CSS after "e": expected 1 selector or at-rule, was "exports = module.ex"
      in D:\Test\WebpackTest\CSSLoaderTest\SCSS\main.scss (line 1, column 1)
 @ ./Scripts/main.js 3:0-28
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/sass-loader/lib/loader.js!node_modules/extract-text-webpack-plugin/dist/loader.js??ref--1-0!node_modules/css-loader/index.js??ref--1-1!node_modules/sass-loader/lib/loader.js!SCSS/main.scss:
       [0] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/extract-text-webpack-plugin/dist/loader.js?{"id":2,"omit":0,"remove":true}!./node_modules/css-loader?{"minimize":true}!./node_modules/sass-loader/lib/loader.js!./SCSS/main.scss 159 bytes {0} [built]
        + 1 hidden module
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! cssloadertest@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the cssloadertest@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\nodejs\node_cache\_logs\2018-01-24T03_09_52_242Z-debug.log

If my webpack.config.js is error? How should I solve it?

Answer 1

That is not possible at the moment with the configuration that you are using.

https://github.com/webpack/webpack/issues/5433

Viable solution to you problem is to use multiple configurations by returning array instead of object then you can pass the same loaders with diffrent config in each literal

 module.exports = [{
    entry: './Scripts/main.js',
    output: { path: path.resolve(__dirname, 'wwwroot/'), filename: 'scripts/bundle.js' },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: extractMiniSASS.extract({
                    use: [{ loader: 'css-loader', options: { minimize: true } }, 'sass-loader'],
                }),
            },
            {
                test: /\.js$/,
                use: [{ loader: 'babel-loader', options: { presets: ['es2015'] } }],
            },
        ],
    },
    plugins: [new webpack.optimize.UglifyJsPlugin(), extractMiniSASS],
},
{
entry: './Scripts/main.js',
output: { path: path.resolve(__dirname, 'wwwroot/'), filename: 'scripts/bundle.js' },
module: {
    rules: [
        {
            test: /\.scss$/,
            use: extractSASS.extract({
                use: ['css-loader', 'sass-loader'],
            }),
        },
    ],
},
plugins: [extractSASS],
},

]

Of course you should remove any duplicates that exist... As this can get messy very fast there is a tool called webpack-merge that can split your config into separate files, remove duplicate loaders etc..

https://github.com/survivejs/webpack-merge

Answer 2

I have modified the webpack.config.js. Try this once.

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

const extractSass = new ExtractTextPlugin({
  filename: "assets/styles/[name].css"
});

const extractMiniSASS = new ExtractTextPlugin({
  filename: "assets/styles/[name].min.css"
});

module.exports = {
  entry: './Scripts/main.js',
  output: {
    path: path.resolve(__dirname, 'wwwroot/'),
    filename: 'scripts/bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['es2015']
            }
          }
        ]
      }, {
        test: /\.scss$/,
        use: extractSass.extract({
          use: [
            {
              loader: "css-loader"
            }, {
              loader: "sass-loader"
            }
          ],
          fallback: "style-loader"
        })
      }
    ]
  }
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    extractSASS,
    extractMiniSASS
  ]
};