How to configure sass-loader to produce only CSS from SCSS

Question

I'm trying to use 2 modules in webpack.config Along with building js bundle I'd like to build CSS for web page, but always got error

ERROR in ./src/sass/company-style.scss 1:3
    Module parse failed: Unexpected token (1:3)
    You may need an appropriate loader to handle this file type.
    > h1 {
    |   color: #c43f4c; }

company-style.scss

$myred: #c43f4c;
h1 {
  color: $myred;
}

Could you please look at cssConfig in following listing. I can't understand how to properly config loader

webpack.config.js

const path = require('path')
var config = {
    // common Configuration
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                }
            }
            ,{
                test: /\.scss$/,
                use: [{
                    loader: 'style-loader'
                }, {
                    loader: 'css-loader'
                }, {
                    loader: 'sass-loader'
                }]
            }

            ,{
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader'
                    }
                ]
            }
        ]
    }

};

var bundleConfig = Object.assign({}, config, {
    name: "js-bundle",
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
});
var cssConfig = Object.assign({}, config,{
    name: "css-bundle",
    entry: "./src/sass/company-style.scss",
    output: {
        filename: "company-style.css",
        path: path.resolve(__dirname, 'dist')
    },

    module: {
        rules: [
            {
                test: /\.scss$/,
                exclude: /(node_modules|bower_components)/,
                /*use: [{
                    loader: 'sass-loader'
                }]*/
                use: ['sass-loader']
            }
        ]
    }
});
module.exports = [
    bundleConfig, cssConfig
];

There no problem with bundleConfig module. bundle.js built and working

Answer 1

If I understand the question correctly, you'd like to produce a standalone CSS file from the SCSS file.

Take a look at mini-css-extract-plugin.

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== 'production'

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: devMode ? '[name].css' : '[name].[hash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
    })
  ],
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      }
    ]
  }
}