build logs

Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--2-2!node_modules/vue-loader/lib/loaders/stylePostLoader.js!node_modules/sass-loader/lib/loader.js??ref--2-3!node_modules/vue-loader/lib/index.js??vue-loader-options!scripts/search/SearchBar.vue?vue&type=style&index=0&id=9c47388e&scoped=true&lang=scss:
    [./node_modules/css-loader/index.js??ref--2-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js??ref--2-3!./node_modules/vue-loader/lib/index.js??vue-loader-options!./scripts/search/SearchBar.vue?vue&type=style&index=0&id=9c47388e&scoped=true&lang=scss] ./node_modules/css-loader??ref--2-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js??ref--2-3!./node_modules/vue-loader/lib??vue-loader-options!./scripts/search/SearchBar.vue?vue&type=style&index=0&id=9c47388e&scoped=true&lang=scss 745 bytes {mini-css-extract-plugin} [built]

MyApp.Vue

<template>
  <div>
    <input type="checkbox"
           class="foobar"
           id="header-search"
           :checked="isFocus" />

		<label for="header-search">
			<img :src="assets.searchIconUrl" alt="Search icon" />
			<img :src="assets.closeIconUrl" alt="Close icon" />
		</label>
		<form id="search" method="get" action="">
			<input type="text" name="q" placeholder="What are you looking for?" :value="query" autocomplete="off" />
 
		</form>
		<ul id="search-result">
			<li v-for="(recipe, index) in recipes"
          :key="recipe.id">
				  {{ recipe }}
			</li>
		</ul>
  </div>
</template>

<script>
 
export default {
  props: {
    query: { type: String },
    // Pass translated strings here until we find a way
    // of using vue-gettext and django makemessages together.
    i18n: { type: Object, required: true },
    assets: { type: Object, required: true },
  },
 
  computed: {
    isFocus() {
      return (this.query !== "");
    },
  },
}
</script>

<style scoped lang="scss">
  .header-search {
    display: none;
  }
  .foobar {
    color: purple;
    background: pink;
  }
</style>

webpack.config.js

// webpack v4
const path = require("path");
const webpack = require("webpack");
const BundleTracker = require("webpack-bundle-tracker");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = (env, argv) => {
  const devMode = argv.mode !== "production";

  return {
    context: __dirname,

    entry: {
      "script-base": ["./scripts/index.js"],
      "style-base": ["./css/styles.scss"],
      "style-box": ["./css/box.scss"]
    },
    output: {
      path: path.resolve(__dirname, "./dist/"),
      // filename: "[name]-[hash].js",
      publicPath: ''

    },

    module: {
      rules: [
        {
          test: /\.js?$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: "babel-loader"
          }
        },
        // VueJS
        {
          test: /\.vue$/,
          loader: "vue-loader"
        },
        // SCSS
        {
          test: /\.scss$/,
          use: [
            'vue-style-loader',
            MiniCssExtractPlugin.loader,
            {
              loader: "css-loader",
              options: {
                sourceMap: devMode ? true : false
              }
            },

            {
              loader: "sass-loader",
              options: {
                sourceMap: devMode ? true : false
              }
            },
            // {
            //   loader: "postcss-loader",
            //   options: {
            //     sourceMap: devMode ? true : false
            //   }
            // },
          ]
        },
        {
          test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
          use: [
            {
              loader: "file-loader",
              options: {
                name: "[name].[ext]",
                outputPath: "fonts/"
              }
            }
          ]
        },
        {
          test: /\.(png|jpg)?$/,
          use: [
            {
              loader: "file-loader",
              options: {
                name: "[name].[ext]",
                outputPath: "images/"
              }
            }
          ]
        }
      ]
    },

    optimization: {
      splitChunks: {
        chunks:'all'
      },
      minimizer: [
        new UglifyJSPlugin({
          sourceMap: true,
          uglifyOptions: {
            compress: {
              inline: false
            }
          }
        })
      ],
    },

    plugins: [
      new CleanWebpackPlugin("dist", {}),
      new VueLoaderPlugin(),

      new MiniCssExtractPlugin({
        filename: devMode ? "[name].css" : "[name].[hash].css",
        chunkFilename: devMode ? "[id].css" : "[id].[hash].css"
      }),
    ],
    // No sourceMaps in production (for now)
    devtool: devMode ? "inline-source-map" : "source-map" 
  };
};