I've tried numerous ways to make a background-image to show but nothing worked and now my Sass files won't compile either.
No error is shown anymore but styles are not in place, just html.
webpack.config:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development', //production
entry: {
main: path.resolve(__dirname, 'src/app.js'),
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[contenthash].js',
assetModuleFilename: '[name][ext]',
clean: true,
},
devtool: 'inline-source-map',
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
port: 8080, //default 8080
open: true,
hot: true,
watchContentBase: true,
},
//loaders
module: {
rules: [
//css
{
test: /\.scss$/, use: ['style-loader', 'css-loader',
'sass-loader']
},
//images
{ test: /\.(svg|ico|png|webp|jpg|gif|jpeg)$/, type: 'asset/resource' },
//js for babel
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
],
},
//plugins
plugins: [
new HtmlWebpackPlugin({
title: 'Just a Demo',
filename: 'index.html',
template: path.resolve(__dirname, 'src/index.html'),
}),
],
};
package.json
"devDependencies": {
"@babel/core": "^7.14.8",
"@babel/preset-env": "^7.14.8",
"babel-loader": "^8.2.2",
"css-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.2",
"style-loader": "^3.2.1",
"webpack": "^5.45.1",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"normalize.css": "^8.0.1",
"sass": "^1.41.1",
"sass-loader": "^12.1.0"
}
}
main.scss file (I'm using @use and @forward) - it worked previously so I assume the way I imported files was correct. Now the same thing shows in main.css file which is strange
@use 'abstracts';
@use 'base';
@use 'layouts';
@use 'pages';
and my project structure
It would be great if someone can help me out as it's been driven me crazy for more than two weeks now
Thank you!