#CSS background-image not building

1 messages · Page 1 of 1 (latest)

steep jewel
#

I don't know if this is the right place to ask, but I am developing a theme and I want a CSS background-image, and when I try this in the admin.style.css:
background-image: url('/assets/extensions/{identifier}/icon.png');
it works and builds, but when I do the exact same on the client.style.css it doesn't work and gives me this error:
- error in next message, the message was too long and Discord complained :( -
I checked and the file exists.

# 
ERROR in ./resources/scripts/blueprint/css/extensions.css (./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/dist/cjs.js??ref--6-2!./resources/scripts/blueprint/css/extensions.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '/assets/extensions/pizzatheme/assets/icon.png' in '/var/www/pterodactyl/resources/scripts/blueprint/css'
    at /var/www/pterodactyl/node_modules/enhanced-resolve/lib/Resolver.js:209:21
    at /var/www/pterodactyl/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create
# 
(/var/www/pterodactyl/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /var/www/pterodactyl/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
    at /var/www/pterodactyl/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/var/www/pterodactyl/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /var/www/pterodactyl/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/var/www/pterodactyl/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /var/www/pterodactyl/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
    at /var/www/pterodactyl/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/var/www/pterodactyl/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /var/www/pterodactyl/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/var/www/pterodactyl/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /var/www/pterodactyl/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/var/www/pterodactyl/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /var/www/pterodactyl/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/var/www/pterodactyl/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /var/www/pterodactyl/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js:27:15
    at /var/www/pterodactyl/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15
    at process.processTicksAndRejections (node:internal/process/task_queues:77:11)
 @ ./resources/scripts/blueprint/css/extensions.css 2:12-173 9:17-24 13:15-22
 @ ./resources/scripts/index.tsx
 @ multi react-hot-loader/patch ./resources/scripts/index.tsx
error Command failed with exit code 2.
restive jasper
steep jewel
# 
# Thank you for developing with Blueprint.
# For documentation about conf.yml, refer to ptero.shop/dev/conf.

info:
  name: 'Pizzacloud Theme'
  identifier: 'pizzatheme'
  description: 'The Pizzacloud Pterodactyl theme.'
  flags: ''
  version: 'v2.0.2'
  target: 'beta-2024-12'
  author: 'Cilps (original author JasonHorkles)'
  icon: 'assets/icon.png'
  website: 'https://pizzacloud.nl'

admin:
  view: 'admin/view.blade.php'
  controller: ''
  css: 'admin/admin.style.css'
  wrapper: ''

dashboard:
  wrapper: ''
  css: 'client/client.style.css'

data:
  directory: ''
  public: 'assets'

database:
  migrations: ''
restive jasper
#

omg this is an old template where did you get that from

#

ooh wait darkenate

#

fair enough

steep jewel
#

I looked at the first free theme on the site that was open source

#

I didn't want to start from scratch

restive jasper
#

alright can you show the line referencing your icon.png from client.style.css?

steep jewel
#

background-image: url('/assets/extensions/{identifier}/icon.png');

#

I just copy pasted it from the admin.style.css.

restive jasper
#

client css is rendered using react

#

if you want to import images, make a file called client/wrapper.blade.php, link it in conf.yml, paste your css and wrap it in <style/> tags

steep jewel
restive jasper
#

not really, your configs still fine

steep jewel
#

Ah, I got it working thanks!

#

And building got so much faster without rebuilding with Yarn.