Theme source map generation via webpack

[a-v-p]

Hello, dear colleagues.

Could you explain how to use webpack for the theme source map generation please?

• I installed  development prestashop  1.7.6.1 version from the official github repository on Ubuntu 18.04.3 LTS server, performing the steps from the Installing PrestaShop for development documentation
• I installed nodejs and npm,

  npm -v 3.5.2, node --version v8.10.0 since the documentation says that

  Quote

   

  If npm install fails with error: Failed at the ... postinstall script.:

  You may be using node version 9 or 10, you should use node version 8.

   

   

•  I run npm install in the _dev folder

• Here are my questions:

1. I see that there is the theme.css.map in the assets/css folder of the classic theme, but I do not see the source sass file in Firefox Development version, show sources option is enabled

2. I expect that the watch mode should regenerate the theme.css.map but it does not. I tried to delete theme.css.map, but it is not generated after nmp run watch

What I am doing wrong?

[a-v-p]

I solved the issue myself. After the 3 days of experiments I did the following:

1. Installed nodejs v8. Not from the repositories, but from Official Node.js binary distribution

   curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
   sudo apt-get install -y nodejs

2. _dev/webpack.config.js,
   change

            test: /\.scss$/,
           use: ExtractTextPlugin.extract({
             fallback: 'style-loader',
             use: [
               {
                 loader: 'css-loader',
                 options: {
                   minimize: true
                 }
               },
               'postcss-loader',
               'sass-loader'
             ]
           })

   to

           test: /\.scss$/,
           use: ExtractTextPlugin.extract({
             fallback: 'style-loader',
             use: [
               {
                 loader: 'css-loader',
                 options: {
                   minimize: true,
                   sourceMap: true                
                 }
               },
               {
                 loader: 'postcss-loader',
                 options: {
                   sourceMap: true                
                 }
               },            
               {
                 loader: 'sass-loader',
                 options: {
                   sourceMap: true                
                 }
               }
             ]
           })

    

3. _dev/package.json
   change

     "scripts": {
       "build": "NODE_ENV=production webpack --progress --colors --debug --display-chunks",
       "watch": "webpack --progress --colors --debug --display-chunks --watch"
     },

   to

     "scripts": {
       "build": "NODE_ENV=production webpack --progress --colors --debug --display-chunks",
       "watch": "webpack --devtool source-map --progress --colors --debug --display-chunks --watch"
     },

   (add --devtool source-map to the watch section)

Now if I delete the assets folder content and run npm run watch, the theme.css.map file is generated and I can see in a browser inspector the source sass files.

[hardstonepaul]

Hello works for me but i only modify the "webpack.config.js" I put this line

devtool: 'source-map',

before

module: {...}

 

The most important is put

sourceMap: true,

in css-loader, postcss-loader and sass-loader options.

Thank you so Much

[savedario]

I tried the approach above but in Prestashop 1.7.8.0 things a different and I cannot generate .map files.

Has anyone solved it for the recent version ?

[draco_ghost]

On 11/12/2021 at 10:27 AM, savedario said:

I tried the approach above but in Prestashop 1.7.8.0 things a different and I cannot generate .map files.

Has anyone solved it for the recent version ?

¿Did you find a solution?

Edited November 25, 2022 by draco_ghost (see edit history)