electron-userland / electron-userland/electron-webpack

__static doesn't work for CSS files in development

Open
#397 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
902
Forks
168
PR merge metrics
No merged PRs in 30d

Description

* **electron-builder**: 22.7.0
* **electron-webpack**: 2.8.2
* **electron**: 9.1.1

* **Target**: electron-renderer

## Background

I want to support custom CSS themes in my application. I want to provide a default theme in case the user has not provided their own. This file should not be preprocessed / compiled by webpack, other than simply being duplicated to the appropriate location in the bundle.

It is my understanding that the `static/` folder is the appropriate place to put such a file.

## Setup

### Project Structure

I organized my project according to the [recommended project structure](https://webpack.electron.build/project-structure):

```
root/
src/
renderer/
renderer.ts
static/
theme.css
```

Contents of `theme.css`: (make everything red so it's obvious when the theme is active)

```
body {
color: red;
background-color: red;
font-size: 72px;
}
```

Contents of `renderer.ts`:

```
\\...
let cssPath = getStatic('theme.css')
console.log("STATIC", cssPath);
let linkElt = document.createElement("link");
linkElt.setAttribute("rel", "stylesheet");
linkElt.setAttribute("type", "text/css");
linkElt.setAttribute("href", cssPath);
document.head.appendChild(linkElt);
\\...
```

## My Attempt

According to the [documentation for "Using Static Assets"](https://webpack.electron.build/using-static-assets),

> __static is made available to provide you a path to your static/ folder. This variable is available in both development and production.

However, from my tests, this statement is incorrect, and `__static` produces meaningless URLs during development. So, I am attempting to use the [`getStatic()` solution](https://github.com/electron-userland/electron-webpack/issues/241#issuecomment-582920906) to make static files accessible to the renderer during both development and production.

```
import path from 'path'
import * as url from 'url'

const isDevelopment = process.env.NODE_ENV !== 'production';

declare const __static:string;

// see https://github.com/electron-userland/electron-webpack/issues/241#issuecomment-582920906
export function getStatic(relativePath:string = "") {
if (isDevelopment) {
return url.resolve(window.location.origin, relativePath)
}
return path.resolve(__static, relativePath)
}
```

## The Problem

### Expected Behavior

* The `getStatic()` function should return a path to `theme.css`
* The renderer should be able to correctly load `theme.css` from a `` element

### Actual Behavior

When I run the app with `electron-webpack dev`, I get the following error in the renderer:

```
Refused to apply style from 'http://localhost:9080/theme.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled
```

My debug print also shows that `getStatic("theme.css")` resolves to `http://localhost:9080/theme.css`. If I try to visit this location in a browser, I get the following error. The renderer probably gets the same error when trying to load this path, which explains the MIME type exception.

```
Cannot GET /theme.css
```

My guess is that this path simply does not exist, since I get a similar error if I visit a nonsensical URL like `http://localhost:9080/asdfasdfasdfasdf.css`.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.