Jump to content
a-v-p

Theme source map generation via webpack

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

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