DEV Community

Discussion on: Electron app with Webpack, Bootstrap, FontAwesome and JQuery - A complete guide

View post
Collapse
 
arnyminerz profile image
Arnyminer Z • • Edited

Hi, I believe there's a small typo in the code for importing postcss, as @remzi has pointed out. The code specified is

...
{
    loader: 'postcss-loader',
    options: {
        postcssOptions: {
            plugins: function () {
                return [
                    require('autoprefixer')
                ];
            }
        }
    }
},
...
Enter fullscreen mode Exit fullscreen mode

This throws the error:

An unhandled rejection has occurred inside Forge:
CssSyntaxError: C:\Users\...\src\index.html:1:1: Unknown word

> 1 | <!DOCTYPE html>
    | ^
  2 | <html>
  3 |   <head>


Electron Forge was terminated. Location:
{}
Enter fullscreen mode Exit fullscreen mode

I thought this had something to do with the css handler taking html files, so I simply added a test parameter to the postcss loader field. Afterall, the postcss part in webpack.renderer.config.js is:

...
{
    test: /\.(css)$/,
    loader: 'postcss-loader',
    options: {
        postcssOptions: {
            plugins: function () {
                return [
                    require('autoprefixer')
                ];
            }
        }
    }
},
...
Enter fullscreen mode Exit fullscreen mode

I'm not very experienced neither with Electron nor Webpack, but I believe this is a valid fix. Correct me if I'm wrong ;).
Thanks for the great tutorial, by the way, really helpful!

Collapse
 
theola profile image
Théo • • Edited

Thanks a lot for your message and your words! :)

And thank you for the proposed fix! I re-read the post, and actually you will see that above in the post, under the section Installing and configuring loaders > 3. scss files, I have already written the test:

// webpack.renderer.config.js

const rules = require('./webpack.rules');

rules.push(
  {
    test: /\.(scss)$/, // all scss files will be handled
    // Use loaders in that specific reverse order
    use: [
      {
        loader: 'style-loader',
      },
      {
        loader: 'css-loader',
      },
      {
        loader: 'sass-loader'
      }
    ]
  },
);

module.exports = {
  // Put your normal webpack config below here
  module: {
    rules,
  },
};
...
Enter fullscreen mode Exit fullscreen mode

However, the snippet code that you quoted is only the relevant section regarding the adaptation of the postcss-loader: for the sake of readability, I didn't rewrite the whole code of webpack.renderer.config.js there. But you can find it here if needed.

So I think that everything's fine! :) But please let me know if I missed something or if you have any other issue!