1

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

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!

Ada
  • 11
  • 2

0 Answers0