Troubleshooting Common Prepros Issues (and How to Fix Them)

How to Set Up Prepros for Sass, Less, and Live Browser Reload

Prepros is a desktop build tool that compiles preprocessors (Sass, Less, Stylus), minifies assets, and provides live browser reload. This guide shows a straightforward setup for compiling Sass and Less, enabling source maps, and configuring Live Reload so changes appear instantly in your browser.

Prerequisites

• Prepros installed (available for Windows, macOS, Linux).
• A project folder with HTML, CSS (or source files), and optionally JS.
• Basic familiarity with Sass (.scss/.sass) and Less (.less) syntax.

1. Open your project in Prepros

1. Launch Prepros.
2. Click “Add Project” (or drag your project folder into the Prepros window).
3. Confirm the project appears in the left sidebar.

2. Configure Sass compilation

1. In the project tree, find a .scss/.sass file and click it.
2. In the file options panel:
   • Output Path: Set where the compiled CSS should be saved (e.g., css/style.css).
   • Format: Choose Expanded or Compressed.
   • Source Map: Toggle on to generate source maps for debugging.
   • Autoprefixer: Enable and set browser support targets if needed.
3. Save or click the compile button to produce the CSS. Prepros will watch the file and recompile on changes.

3. Configure Less compilation

1. Click a .less file in the project tree.
2. In the file options:
   • Output Path: e.g., css/style.css.
   • Minify: Enable if you want compressed output.
   • Source Map: Toggle on for mapping to Less sources.
3. Prepros watches and recompiles Less files automatically on save.

4. Enable Live Browser Reload

1. Open the project settings (gear icon) or the Live Server panel.
2. Start the built-in server by clicking “Open in Browser” or “Start Server.” Prepros will provide a local URL (e.g., http://localhost:1234).
3. With the server running, enable Live Reload. Options:
   • Inject script: Prepros injects a small script into served pages to handle reloads.
   • Browser extension: Alternatively install Prepros’ browser extension if you prefer.
4. Open your site using the provided local URL. Now when you edit and save Sass/Less/HTML/JS files, Prepros will recompile and reload or inject updated CSS without a full refresh.

5. Additional useful settings

• BrowserSync: If available, enable for synchronized testing across devices.
• Image optimization: Turn on to compress images during builds.
• Cache busting: Enable query-string or filename hashing for production.
• Custom commands: Add pre/post build scripts (npm, gulp, shell) in project settings.

6. Common troubleshooting

• No reload after changes: Ensure Live Reload is enabled and you opened the site via Prepros’ local URL.
• Source maps not mapping: Confirm source map option is enabled and output paths are correct.
• Autoprefixer not applying: Check browser targets and that Autoprefixer is toggled on for the file.

7. Quick checklist before deployment

• Compile all assets in compressed mode.
• Remove source maps for production unless needed.
• Minify JS and CSS.
• Verify links to compiled CSS/JS in your HTML point to the production files.

That’s it — with these steps Prepros will compile your Sass and Less, watch for changes, and reload the browser so you can iterate faster.