I am using buefy library for theming in vue js application. I am getting following build error in webpack.config.js. Can anyone help me with that?

[ashwanizsktm]

here is my wepack.config.js
`const { VueLoaderPlugin } = require("vue-loader");
const htmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const autoprefixer = require("autoprefixer");
const path = require("path");

module.exports = {
	entry: {
		main: "./src/main.js",
	},
	output: {
		filename: "[name].[contenthash:8].js",
		path: path.resolve(__dirname, "dist"),
		chunkFilename: "[name].[contenthash:8].js",
	},
	module: {
	

		rules: [   
			{
				test: /\.js$/,
				exclude: /node_modules/,
				use: {
					loader: "babel-loader",
				},
			},
			{
				test: /\.vue$/,
				loader: "vue-loader",
			},
			

			{
				test: /\.(eot|ttf|woff|woff2)(\?\S*)?$/,
				loader: "file-loader",
				options: {
					name: "[name][contenthash:8].[ext]",
				},
			},
			{
				test: /\.scss$/,
				use: [
					// fallback to style-loader in development
					process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
					"css-loader",
					"sass-loader"
				]
			},
			{
				test: /\.(png|jpe?g|gif|webm|mp4|svg)$/,
				loader: "file-loader",
				options: {
					name: "[name][contenthash:8].[ext]",
					outputPath: "assets/img",
					esModule: false,
				},
			},

		],
	},

	plugins: [
		new VueLoaderPlugin(),
		new CleanWebpackPlugin(),
		new MiniCssExtractPlugin({
			filename: "[name].css",
			chunkFilename: "[id].css"

		}),
		new htmlWebpackPlugin({
			template: path.resolve(__dirname, "public", "index.html"),
			favicon: "./public/favicon.ico",
		}),
	],
	resolve: {
		alias: {
			'@app': path.resolve(__dirname, 'src/'),
			vue$: "vue/dist/vue.runtime.esm.js",
		},
		extensions: ["*", ".js", ".vue", ".json"],
	},
	optimization: {
		moduleIds: "deterministic",
		runtimeChunk: "single",
		splitChunks: {
			cacheGroups: {
				vendor: {
					test: /[\\/]node_modules[\\/]/,
					name: "vendors",
					priority: -10,
					chunks: "all",
				},
			},
		},
	}, stats: {
		children: true,
	},
	devServer: {
		historyApiFallback: true,
	},
	performance: {
		hints: false
	}

};`

and this is package.json

{
  "name": "dummy-vue-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --config webpack.dev.js",
    "build": "webpack build --config webpack.prod.js",
    "prod": "webpack serve --config webpack.prod.js",
    "build:dev": "webpack build --config webpack.dev.js",
    "build:watch": "webpack build --watch --config webpack.dev.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.26.0",
    "buefy": "^0.9.10",
    "core-js": "^3.16.3",
    "express": "^4.17.1",
    "lodash": "^4.17.21",
    "vue": "^2.6.14",
    "vue-router": "^3.5.2",
    "vue-server-renderer": "^2.6.14",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "autoprefixer": "^10.3.2",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "css-loader": "^6.2.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.2",
    "mini-css-extract-plugin": "^2.2.0",
    "node-sass": "^6.0.1",
    "postcss": "^8.3.6",
    "postcss-loader": "^6.1.1",
    "sass": "~1.32.12",
    "sass-loader": "^12.5.0",
    "style-loader": "^3.2.1",
    "vue-loader": "^15.9.8",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.0.0",
    "webpack-merge": "^5.7.3"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

I am getting the following Error

ERROR in ./node_modules/buefy/dist/buefy.css 2:0
Module parse failed: Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| /*! Buefy v0.9.17 | MIT License | github.com./buefy/buefy */

@charset "UTF-8";
| .is-noscroll {
| position: fixed;
@ ./src/main.js 11:0-30

webpack 5.68.0 compiled with 1 error in 3689 ms

[carsonbot]

Thank you for this issue.
There has not been a lot of activity here for a while. Has this been resolved?