Как решить ошибку сборки вебпак, связанную с комментариями в коде?

script: "start": "webpack-dev-server --inline --progress --host localhost", При сборке возникает такая ошибка(на этом месте в коде находиться комментарий):

           ^
  Invalid CSS after "...* Transition */": expected 1 selector or at-rule, was "-------------------"
  in E:\New_Work\testelium_stage\panel\src\assets\styles\main.scss (line 6, column 17)

Полный webpack.config.js:

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader')
const ManifestPlugin = require('webpack-manifest-plugin');
const Dotenv = require('dotenv-webpack');

module.exports = {
    // Entrypoint
    entry: './src/main.js',
    // Output
    output: {
        filename: 'build.js?v='+ Date.now(),
        path: path.resolve(__dirname, './web'),
        publicPath: '/',
    },
    devServer: {
        // host: "localhost",
        // port: 3000,
        // https: true,
        stats: 'errors-only'
    },
    // devtools
    devtool: 'inline-source-map',
    // file loaders
    module: {
        rules: [
            // Load vue files via vue-loader
            {
                test: /\.vue$/,
                use: 'vue-loader',
            },
            // Load sass files via vue-loader
            {
                test: /\.sass$/,
                use:  [  'vue-style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', { loader: 'sass-loader', options: { indentedSyntax: true } }]
            },
            // Load scss files via vue-loader
            {
                test: /\.scss$/,
                use:  [  'vue-style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
            },
            // Load css files via vue-loader
            {
                test: /\.css$/,
                use: [ 'vue-style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
            },
            // Load js files via babel-loader
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: file => ( /node_modules/.test(file) && !/\.vue\.js/.test(file) ),
                options: {
                    plugins: [require('babel-plugin-syntax-dynamic-import')]
                },
            },
            // Load media files + fonts
            {
                test: /\.(png|jpg|gif|svg|woff|woff2|eot|ttf)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]',
                    outputPath: '/static/',
                    publicPath: '/static/',
                }
            }
        ]
    },
    plugins: [
        // Clean web folder
        new CleanWebpackPlugin(['web']),
        // Use magic via VueLoader
        new VueLoaderPlugin(),
        // Insert extentions to main index.html
        new HtmlWebpackPlugin({
            title: 'Testelium admin',
            template: 'index.html',
            filename: path.resolve(__dirname, './web/index.html'),
            favicon: './src/assets/favicon.png',
        }),
        // Copy files plugin
        new CopyWebpackPlugin([
            { from: './.htaccess', to: '' },
        ]),
        // Minifiy and extract build files to remote css
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        }),
        // Add manifest
        new ManifestPlugin(),
        new Dotenv(),
    ],
}