title: scss file is not loading while using webpack
body: <p>I hope everything is fine over there. I need your help.</p>
  <p>My .scss file is not loading in webpack and giving error. I explain everything in detail.</p>
  <ul>
  <li>I have application.scss file in my <code>assets/css/application.scss</code> folder.</li>
  </ul>
  <pre><code>.vertical.menu {
    display: flex;
    flex-direction: column;
  }
  
  .config.menu {
    margin-top: auto;
  }
  
  .site-page {
    font-size: 1.3em;
    line-height: 1.6em;
    font-family: Lato, Helvetica, Arial, sans-serif;
    font-weight: 100 !important;
    background-color: $bgcolor;
  }
  </code></pre>
  <ul>
  <li>I have imported it in app.scss<code>(assets/css/app.scss)</code></li>
  </ul>
  <pre><code>@import &quot;../node_modules/fomantic-ui-less/semantic.less&quot;;
  @import &quot;../node_modules/nprogress/nprogress.css&quot;;
  @import &quot;application.scss&quot;;
  </code></pre>
  <ul>
  <li>Imported this app.scss in app.js <code>assets/js/app.js</code></li>
  <li>Below is my webpack.config.js <code>assets/webpack.config.js</code></li>
  </ul>
  <pre><code>
  const path = require(&quot;path&quot;);
  const webpack = require(&quot;webpack&quot;);
  const CopyWebpackPlugin = require(&quot;copy-webpack-plugin&quot;);
  const autoprefixer = require(&quot;autoprefixer&quot;);
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  const TerserPlugin = require('terser-webpack-plugin');
  const PurgecssPlugin = require('purgecss-webpack-plugin');
  const globAll = require('glob-all');
  
  
  module.exports = (env, options) =&gt; {
    const devMode = options.mode !== 'production';
  
  
    return {
      devtool: devMode ? 'source-map' : undefined,
  
      context: __dirname,
  
      entry: {
        app: [
          &quot;js/app.js&quot;,
        ],
        dashboard: 'js/dashboard.js'
      },
  
      output: {
        path: path.resolve(__dirname, &quot;../priv/static&quot;),
        filename: devMode? 'js/[name].js' : 'js/[name].[hash].js',
      },
  
      devServer: {
        headers: {
          &quot;Access-Control-Allow-Origin&quot;: &quot;*&quot;,
        }
      },
  
      optimization: {
        minimizer: [
          new TerserPlugin({
            terserOptions: {
              output: {
                comments: false,
              },
            },
            cache: true,
            parallel: true,
            sourceMap: devMode
          }),
          new OptimizeCSSAssetsPlugin({}),
          new PurgecssPlugin({
            paths: globAll.sync([
              '../lib/**/templates/**/*.html.eex',
              '../lib/**/templates/**/*.html.leex',
              '../lib/**/views/**/*.ex',
              '../assets/js/**/*.js',
            ]),
           }),
        ]
      },
  
      plugins: [
  
        new CopyWebpackPlugin([{
          from: &quot;./static&quot;,
          to: path.resolve(__dirname, &quot;../priv/static&quot;)
        }]),
  
        new MiniCssExtractPlugin({
          filename: devMode ? 'css/[name].css' : 'css/[name].[hash].css',
          chunkFilename: devMode ? 'css/[id].css' : 'css/[id].[hash].css',
        }),
  
        new webpack.ProvidePlugin({
          $: &quot;jquery&quot;,
          jQuery: &quot;jquery&quot;,
          jquery: &quot;jquery&quot;,
          &quot;window.jQuery&quot;: &quot;jquery&quot;,
          &quot;window.$&quot;: &quot;jquery&quot;
        })
      ],
  
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader'
            }
          },
          {
            test: /\.(sa|sc|c|le)ss$/,
            use: [
              {
                loader: MiniCssExtractPlugin.loader,
                options: {
                  hmr: process.env.NODE_ENV === 'development',
                  reloadAll: true,
                },
              },
              'css-loader',
              'sass-loader',
              'postcss-loader',
              'less-loader',
            ],
            sideEffects: true
          },
          {
            test: require.resolve('jquery'),
            use: [{
              loader: 'expose-loader',
              options: 'jQuery'
            },{
              loader: 'expose-loader',
              options: '$'
            }]
          },
          {
            test: /\.(jsx?)$/,
            exclude: /node_modules/,
            loader: &quot;babel-loader&quot;
          },
  
          {
            test: /\.(gif|png|jpe?g)$/i,
            use: [{
              loader: 'url-loader',
              options: {
                limit: 8000, // Convert images &lt; 8kb to base64 strings
                name: 'images/[name].[ext]'
              }
            }]
          },
  
          {
            test: /\.(ttf|woff2?|eot|svg)$/,
            use: {
              loader: 'url-loader?limit=1024&amp;name=/fonts/[name].[ext]'
            }
          },
        ]
      },
  
      resolve: {
        alias: {
          '../../theme.config$': path.join(__dirname, 'semantic_theme/theme.config'),
          'jquery': path.join(__dirname, 'node_modules/jquery/dist/jquery.min')
        },
        modules: [&quot;node_modules&quot;, __dirname],
        extensions: [&quot;.js&quot;, &quot;.json&quot;, &quot;.jsx&quot;, &quot;.css&quot;, &quot;.styl&quot;, &quot;.less&quot;, &quot;.scss&quot;]
      },
  
    };
  };
  </code></pre>
  <ul>
  <li>Below is my package.json <code>assets/package.json</code></li>
  </ul>
  <pre><code>{
    &quot;repository&quot;: {},
    &quot;license&quot;: &quot;MIT&quot;,
    &quot;scripts&quot;: {
      &quot;deploy&quot;: &quot;node_modules/.bin/webpack --mode production&quot;,
      &quot;watch&quot;: &quot;node_modules/.bin/webpack --watch --colors --mode development&quot;
    },
    &quot;dependencies&quot;: {
      &quot;bootstrap-icons&quot;: &quot;^1.0.0-alpha5&quot;,
      &quot;child-replace-with-polyfill&quot;: &quot;^1.0.1&quot;,
      &quot;classlist-polyfill&quot;: &quot;^1.2.0&quot;,
      &quot;clipboard&quot;: &quot;^2.0.4&quot;,
      &quot;fomantic-ui-less&quot;: &quot;^2.8.4&quot;,
      &quot;formdata-polyfill&quot;: &quot;^3.0.19&quot;,
      &quot;jquery&quot;: &quot;^3.3.1&quot;,
      &quot;mdn-polyfills&quot;: &quot;^5.19.0&quot;,
      &quot;nprogress&quot;: &quot;^0.2.0&quot;,
      &quot;phoenix&quot;: &quot;file:../deps/phoenix&quot;,
      &quot;phoenix_html&quot;: &quot;file:../deps/phoenix_html&quot;,
      &quot;phoenix_live_view&quot;: &quot;file:../deps/phoenix_live_view&quot;,
      &quot;semantic-ui-calendar&quot;: &quot;^0.0.8&quot;,
      &quot;url-search-params-polyfill&quot;: &quot;^7.0.0&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.7.2&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.7.1&quot;,
      &quot;autoprefixer&quot;: &quot;^9.7.1&quot;,
      &quot;babel-cli&quot;: &quot;^6.26.0&quot;,
      &quot;babel-loader&quot;: &quot;^8.0.6&quot;,
      &quot;babel-preset-env&quot;: &quot;^1.6.1&quot;,
      &quot;copy-webpack-plugin&quot;: &quot;^5.0.5&quot;,
      &quot;css-loader&quot;: &quot;^3.2.0&quot;,
      &quot;expose-loader&quot;: &quot;^0.7.5&quot;,
      &quot;file-loader&quot;: &quot;^4.2.0&quot;,
      &quot;glob-all&quot;: &quot;^3.2.1&quot;,
      &quot;image-webpack-loader&quot;: &quot;^6.0.0&quot;,
      &quot;less&quot;: &quot;^3.10.3&quot;,
      &quot;less-loader&quot;: &quot;^5.0.0&quot;,
      &quot;mini-css-extract-plugin&quot;: &quot;^0.8.0&quot;,
      &quot;node-sass&quot;: &quot;^4.14.0&quot;,
      &quot;optimize-css-assets-webpack-plugin&quot;: &quot;^5.0.3&quot;,
      &quot;postcss&quot;: &quot;^7.0.21&quot;,
      &quot;postcss-loader&quot;: &quot;^3.0.0&quot;,
      &quot;purgecss-webpack-plugin&quot;: &quot;^2.2.0&quot;,
      &quot;sass-loader&quot;: &quot;^8.0.2&quot;,
      &quot;style-loader&quot;: &quot;^1.0.0&quot;,
      &quot;terser-webpack-plugin&quot;: &quot;^3.0.0&quot;,
      &quot;url-loader&quot;: &quot;^2.2.0&quot;,
      &quot;webpack&quot;: &quot;^4.41.2&quot;,
      &quot;webpack-cli&quot;: &quot;^3.3.10&quot;,
      &quot;webpack-dev-server&quot;: &quot;^3.1.0&quot;
    },
    &quot;optionalDependencies&quot;: {
      &quot;fsevents&quot;: &quot;^2.1.0&quot;
    }
  }
  </code></pre>
  <ul>
  <li>When I run my project <code>iex -S mix phx.server</code> (I am using phoenix and Semantic for UI). Getting below error.</li>
  </ul>
  <pre><code>ERROR in ./css/app.scss
  Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
  ModuleBuildError: Module build failed (from ./node_modules/less-loader/dist/cjs.js):
  
  
  
  @import &quot;application.scss&quot;;
  ^
  Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
  ModuleBuildError: Module build failed (from ./node_modules/less-loader/dist/cjs.js):
  
  
  
  $bgcolor: #0000FF;
  ^
  Unrecognised input
        in /Users/maheshvuppala/icicle/Work/Code/icicle-2020/assets/css/application.scss (line 3, column 0)
      at /Users/maheshvuppala/icicle/Work/Code/icicle-2020/assets/node_modules/webpack/lib/NormalModule.js:316:20
      at /Users/maheshvuppala/icicle/Work/Code/icicle-2020/assets/node_modules/loader-runner/lib/LoaderRunner.js:367:11
      at /Users/maheshvuppala/icicle/Work/Code/icicle-2020/assets/node_modules/loader-runner/lib/LoaderRunner.js:233:18
      at context.callback (/Users/maheshvuppala/icicle/Work/Code/icicle-2020/assets/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
        in /Users/maheshvuppala/icicle/Work/Code/icicle-2020/assets/css/app.scss (line 7, column 0)
      at /Users/maheshvuppala/icicle/Work/Code/icicle-2020/assets/node_modules/webpack/lib/NormalModule.js:316:20
      at /Users/maheshvuppala/icicle/Work/Code/icicle-2020/assets/node_modules/loader-runner/lib/LoaderRunner.js:367:11
      at /Users/maheshvuppala/icicle/Work/Code/icicle-2020/assets/node_modules/loader-runner/lib/LoaderRunner.js:233:18
      at context.callback (/Users/maheshvuppala/icicle/Work/Code/icicle-2020/assets/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
   @ ./js/app.js 4:0-25
   @ multi js/app.js
  Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/less-loader/dist/cjs.js!css/app.scss:
  </code></pre>
  <ul>
  <li>Please help me with this, I have tried all possible ways which I got from online. Your solution might help me. Thanks in advance.</li>
  </ul>