title: Webpack compile scss to css and minify
body: <p>I am new with webpack and I am struggling how to convert scss to css and then minify.</p>
  
  <p>File structure</p>
  
  <pre><code> public
       ┣ dist
       ┃ ┣ css
       ┃ ┗ js
       ┃ ┃ ┗ adminMain.js
       ┣ src
       ┃ ┣ css
       ┃ ┃ ┃ ┣ admin.css
       ┃ ┃ ┃ ┣ admin.css.map
       ┃ ┃ ┃ ┣ admin.scss
       ┃ ┃ ┃ ┣ main.css
       ┃ ┃ ┃ ┣ main.css.map
       ┃ ┃ ┃ ┗ main.scss
       ┃ ┗ js
       ┃ ┃ ┗ adminMain.js
  </code></pre>
  
  <p>I am compiling js like this</p>
  
  <pre><code>"dev": "webpack --mode development ./public/src/js/adminMain.js --output ./public/dist/js/adminMain.js",
  "build": "webpack --mode production ./public/src/js/adminMain.js --output ./public/dist/js/adminMain.js"
  </code></pre>
  
  <p>I found thing like <code>sass-loader</code> but cant make it work.  </p>
  
  <p>webpack.config.js  </p>
  
  <pre><code>module.exports = {
      module: {
          rules: [{
              test: /\.scss$/,
              use: [{
                  loader: "sass-loader",
                  options: {
                      minimize: true
                  }
              }]
          }]
      }
  };
  </code></pre>
  
  <p>i dont know where to put path to included file and where to put path to output.</p>
  
  <p>I will be thankfull for any advice.</p>