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.

  • Thanks 1

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