Jump to content

Classic theme SASS/webpack sourcemap problem


Recommended Posts

Did anyone using classic theme  had problems with scss file naming using the browser inspector? I am using standard webpack configuration from the classic theme. It compiles properly but browser inspectors shows different scss file names which is very annoying and I am out of ideas. My current webpack config :

Any suggestions would me much appreciated. 


const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CssoWebpackPlugin = require('csso-webpack-plugin').default;
const LicensePlugin = require('webpack-license-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
let config = {
  entry: {
    theme: ['./js/theme.js', './css/theme.scss'],
    error: ['./css/error.scss'],
  output: {
    path: path.resolve(__dirname, '../assets/js'),
    filename: '[name].js',
    devtool: 'source-map',
  resolve: {
    preferRelative: true,
  module: {
    rules: [
        test: /\.js/,
        loader: 'esbuild-loader',
        test: /\.scss$/,
            { loader: "css-loader", options: { sourceMap: true } },
            { loader: "postcss-loader", options: { sourceMap: true } },
            { loader: "sass-loader", options: { sourceMap: true } },
        test: /.(png|woff(2)?|eot|otf|ttf|svg|gif)(\?[a-z0-9=\.]+)?$/,
        type: 'asset/resource',
        generator: {
          filename: '../css/[hash][ext]',
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'style-loader', 'css-loader', 'postcss-loader'],
  externals: {
    prestashop: 'prestashop',
    $: '$',
    jquery: 'jQuery',
  plugins: [
    new MiniCssExtractPlugin({filename: path.join('..', 'css', '[name].css')}),
    new CssoWebpackPlugin({
      forceMediaMerge: true,
      new BrowserSyncPlugin({
          // browse to http://localhost:3000/ during development,
          // ./public directory is being served
          host: 'localhost',
          port: 3000,
    new LicensePlugin({
      outputFilename: 'thirdPartyNotice.json',
      licenseOverrides: {
        '[email protected]': 'Apache-2.0',
      replenishDefaultLicenseTexts: true,
if (process.env.NODE_ENV === 'development') {
  config.optimization = {
    minimize: false,
    minimizer: [
      new TerserPlugin({
        parallel: true,
        extractComments: false,
module.exports = config;


Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More