<p dir="auto">Hi,<br>
I configured my webpack files in order to develop a client project. I have some issues when i run the following command <code class="notranslate">yarn develop</code>. I have no issues in the production mode.<br>
Thanks for helping me.</p>
<p dir="auto"><em>webpack.dev.js</em></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const path = require('path')
const commonConfig = require('./webpack.common.js')
const merge = require('webpack-merge')
const MiniCssExtractPlugin = require(&quot;mini-css-extract-plugin&quot;)


console.log('Development mode')
const devConfig = {
    mode: 'development',
       entry: './src/main.js',
           output: {
               filename: 'main.bundle.js',
               path: path.resolve(__dirname, 'dist'),
               publicPath: '/dist'
           },
    plugins: [
        new MiniCssExtractPlugin({
            filename: &quot;[name].css&quot;,
            chunkFilename: &quot;[id].css&quot;
        })
    ],

    module: {
        rules: [{
            test: /\.(sa|sc|c)ss$/,
            use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '/dist'
                    }
                },
                &quot;css-loader&quot;, &quot;sass-loader&quot;,
            ]
        }]
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: &quot;babel-loader&quot;
        }]
    }
    
}
module.exports = merge(commonConfig, devConfig)
"><pre class="notranslate"><code class="notranslate">const path = require('path')
const commonConfig = require('./webpack.common.js')
const merge = require('webpack-merge')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")


console.log('Development mode')
const devConfig = {
    mode: 'development',
       entry: './src/main.js',
           output: {
               filename: 'main.bundle.js',
               path: path.resolve(__dirname, 'dist'),
               publicPath: '/dist'
           },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ],

    module: {
        rules: [{
            test: /\.(sa|sc|c)ss$/,
            use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '/dist'
                    }
                },
                "css-loader", "sass-loader",
            ]
        }]
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        }]
    }
    
}
module.exports = merge(commonConfig, devConfig)

</code></pre></div>
<p dir="auto"><em>webpack.prod.js</em></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const path = require('path')
const commonConfig = require('./webpack.common.js')
const merge = require('webpack-merge')
const UglifyJsPlugin = require(&quot;uglifyjs-webpack-plugin&quot;)
const OptimizeCSSAssetsPlugin = require(&quot;optimize-css-assets-webpack-plugin&quot;)
const MiniCssExtractPlugin = require(&quot;mini-css-extract-plugin&quot;)
console.log('Production mode')

const prodConfig = {
    mode: 'production',
    entry: './src/main.js',
        output: {
            filename: 'main.bundle.[hash].js',
            path: path.resolve(__dirname, 'dist'),
            publicPath: '/dist'
        },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true // set to true if you want JS source maps
            }),
            new OptimizeCSSAssetsPlugin({
                cssProcessorOptions: {
                    discardComments: {
                        removeAll: true
                    }
                },
                canPrint: true
            })
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: &quot;[name].[hash].css&quot;,
            chunkFilename: &quot;[id].[hash].css&quot;
        })
    ],

    module: {
        rules: [{
            test: /\.(sa|sc|c)ss$/,
            use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '/dist'
                    }
                },
                &quot;css-loader&quot;, &quot;sass-loader&quot;,
            ]
        }]
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                styles: {
                    name: 'styles',
                    test: /\.css$/,
                    chunks: 'all',
                    enforce: true
                }
            }
        }
    },
    
}
module.exports = merge(commonConfig, prodConfig)"><pre class="notranslate"><code class="notranslate">const path = require('path')
const commonConfig = require('./webpack.common.js')
const merge = require('webpack-merge')
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
console.log('Production mode')

const prodConfig = {
    mode: 'production',
    entry: './src/main.js',
        output: {
            filename: 'main.bundle.[hash].js',
            path: path.resolve(__dirname, 'dist'),
            publicPath: '/dist'
        },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true // set to true if you want JS source maps
            }),
            new OptimizeCSSAssetsPlugin({
                cssProcessorOptions: {
                    discardComments: {
                        removeAll: true
                    }
                },
                canPrint: true
            })
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].[hash].css",
            chunkFilename: "[id].[hash].css"
        })
    ],

    module: {
        rules: [{
            test: /\.(sa|sc|c)ss$/,
            use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '/dist'
                    }
                },
                "css-loader", "sass-loader",
            ]
        }]
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                styles: {
                    name: 'styles',
                    test: /\.css$/,
                    chunks: 'all',
                    enforce: true
                }
            }
        }
    },
    
}
module.exports = merge(commonConfig, prodConfig)
</code></pre></div>
<p dir="auto"><em>webpack.common.js</em></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="
module.exports = {
   node: {
        fs: 'empty'
    } 
}"><pre class="notranslate"><code class="notranslate">
module.exports = {
   node: {
        fs: 'empty'
    } 
}
</code></pre></div>


<h1 dir="auto">Bug report</h1>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="$ yarn develop
yarn run v1.3.2
$ webpack --mode=development --config webpack.dev.js --watch
Development mode

webpack is watching the files…

Hash: 5323eebb9fe7fcf17ac1
Version: webpack 4.28.2
Time: 2380ms
Built at: 2018-12-27 09:53:49
         Asset     Size  Chunks             Chunk Names
main.bundle.js  443 KiB    main  [emitted]  main
Entrypoint main = main.bundle.js
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 47
2 bytes {main} [built]
[./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harm
ony-module.js 573 bytes {main} [built]
[./src/main.js] 774 bytes {main} [built]
[./src/style.scss] 175 bytes {main} [built] [failed] [1 error]
    + 11 hidden modules

ERROR in ./src/style.scss 1:8
Module parse failed: Unexpected character '#' (1:8)
You may need an appropriate loader to handle this file type.
&gt; $orange:#e75300;
| html,
| a {
 @ ./src/main.js 5:10-33"><pre class="notranslate"><code class="notranslate">$ yarn develop
yarn run v1.3.2
$ webpack --mode=development --config webpack.dev.js --watch
Development mode

webpack is watching the files…

Hash: 5323eebb9fe7fcf17ac1
Version: webpack 4.28.2
Time: 2380ms
Built at: 2018-12-27 09:53:49
         Asset     Size  Chunks             Chunk Names
main.bundle.js  443 KiB    main  [emitted]  main
Entrypoint main = main.bundle.js
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 47
2 bytes {main} [built]
[./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harm
ony-module.js 573 bytes {main} [built]
[./src/main.js] 774 bytes {main} [built]
[./src/style.scss] 175 bytes {main} [built] [failed] [1 error]
    + 11 hidden modules

ERROR in ./src/style.scss 1:8
Module parse failed: Unexpected character '#' (1:8)
You may need an appropriate loader to handle this file type.
&gt; $orange:#e75300;
| html,
| a {
 @ ./src/main.js 5:10-33
</code></pre></div>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>






<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">No parsing error.</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:   4.23.1<br>
Node.js version: 8.11<br>
Operating System: windows 10<br>
Additional tools: VSCode, Expression Engine CMS</p>