Hi!
What could be causing these default styles to occur? and how to disable them without using “!important”? I did not assign them. Maybe webpack does so? here is my configuration file
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: {
main: "./src/pages/index.js",
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name][contenthash].js",
clean: true,
assetModuleFilename: "[name][ext]",
},
mode: "development",
devServer: {
static: path.resolve(__dirname, "./dist"),
open: true,
compress: true,
port: 8080,
},
module: {
rules: [
{
test: /\.js$/,
use: "babel-loader",
exclude: "/node_modules/",
},
{
test: /\.s[ac]ss$/i,
use: [
"style-loader",
"css-loader",
{
loader: "sass-loader",
options: {
sassOptions: {
indentWidth: 4,
includePaths: ["src"],
},
},
},
],
},
{
test: /\.(png|svg|jpg|gif|woff(2)?|eot|ttf|otf)$/,
type: "asset/resource",
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
}),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin(),
],
};