B
Blueprint•2mo ago
Cilps

CSS background-image not building

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.
Solution:
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
Jump to solution
12 Replies
Cilps
CilpsOP•2mo ago
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 
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.
(/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.
Emma
Emma•2mo ago
Did you assign admin.style.css to dashboard: css?
Cilps
CilpsOP•2mo ago
# 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: ''
# 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: ''
Emma
Emma•2mo ago
omg this is an old template where did you get that from ooh wait darkenate fair enough
Cilps
CilpsOP•2mo ago
I looked at the first free theme on the site that was open source I didn't want to start from scratch
Emma
Emma•2mo ago
alright can you show the line referencing your icon.png from client.style.css?
Cilps
CilpsOP•2mo ago
background-image: url('/assets/extensions/{identifier}/icon.png'); I just copy pasted it from the admin.style.css.
Emma
Emma•2mo ago
client css is rendered using react
Solution
Emma
Emma•2mo ago
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
Cilps
CilpsOP•2mo ago
Okay ill try that, but do I need to update?
Emma
Emma•2mo ago
not really, your configs still fine
Cilps
CilpsOP•2mo ago
Ah, I got it working thanks! And building got so much faster without rebuilding with Yarn.

Did you find this page helpful?