@asset directive not working

sage
1

Hi guys,

Urls using @asset (e.g., @asset('images/logo.svg')) started returning 404 errors.

This is the output i get:
<img class="logo" src="@asset('/logo.svg')">
It should output this:
<img class="logo" src="imagePath/logo.svg">

Package.json:

{
  "name": "sage",
  "private": true,
  "browserslist": [
    "extends @roots/browserslist-config"
  ],
  "engines": {
    "node": ">=16.0.0"
  },
  "type": "module",
  "scripts": {
    "dev": "bud dev",
    "build": "bud build",
    "translate": "yarn translate:pot && yarn translate:update",
    "translate:pot": "wp i18n make-pot . ./resources/lang/granddigital.pot --include=\"app,resources\"",
    "translate:update": "for filename in ./resources/lang/*.po; do msgmerge -U $filename ./resources/lang/granddigital.pot; done; rm -f ./resources/lang/*.po~",
    "translate:compile": "yarn translate:mo && yarn translate:js",
    "translate:js": "wp i18n make-json ./resources/lang --pretty-print",
    "translate:mo": "wp i18n make-mo ./resources/lang ./resources/lang"
  },
  "devDependencies": {
    "@popperjs/core": "^2.11.6",
    "@roots/bud": "6.9.1",
    "@roots/bud-sass": "^6.9.1",
    "@roots/sage": "6.9.1",
    "bootstrap": "^5.2.3"
  }
}

Composer.json

{
  "name": "roots/sage",
  "type": "wordpress-theme",
  "license": "MIT",
  "description": "WordPress starter theme with a modern development workflow",
  "homepage": "https://roots.io/sage/",
  "authors": [
    {
      "name": "Ben Word",
      "email": "ben@benword.com",
      "homepage": "https://github.com/retlehs"
    },
    {
      "name": "Scott Walkinshaw",
      "email": "scott.walkinshaw@gmail.com",
      "homepage": "https://github.com/swalkinshaw"
    },
    {
      "name": "QWp6t",
      "email": "hi@qwp6t.me",
      "homepage": "https://github.com/qwp6t"
    },
    {
      "name": "Brandon Nifong",
      "email": "brandon@tendency.me",
      "homepage": "https://github.com/log1x"
    }
  ],
  "keywords": [
    "wordpress"
  ],
  "support": {
    "issues": "https://github.com/roots/sage/issues",
    "forum": "https://discourse.roots.io/"
  },
  "autoload": {
    "psr-4": {
      "App\\": "app/"
    }
  },
  "require": {
    "php": "^8.0",
    "blade-ui-kit/blade-icons": "^1.5",
    "garrettweinberg/sage-bootstrap5-navwalker": "^1.4",
    "log1x/sage-svg": "^1.1",
    "roots/acorn": "^3.1"
  },
  "require-dev": {
    "squizlabs/php_codesniffer": "3.7.1"
  },
  "suggest": {
    "log1x/sage-directives": "A collection of useful Blade directives for WordPress and Sage (^1.0).",
    "log1x/sage-svg": "A useful SVG directive for inlining SVG's within Blade views (^1.0)."
  },
  "config": {
    "optimize-autoloader": true,
    "preferred-install": "dist",
    "sort-packages": true
  },
  "minimum-stability": "dev",
  "prefer-stable": true,
  "scripts": {
    "lint": [
      "phpcs --extensions=php --standard=PSR12 app"
    ]
  },
  "extra": {
    "acorn": {
      "providers": [
        "App\\Providers\\ThemeServiceProvider"
      ]
    }
  }
}

NB: I don’t use Bedrock
Thank you

2

It works after removing blade-ui-kit/blade-icons package

Then run these commands :

wp acorn clear-compiled
wp acorn config:clear  
wp acorn optimize:clear
wp acorn view:clear

Any idea ?

3

Did you do all of these steps to set up blade-ui-kit/blade-icons? How to use blade-icons | Sage Docs | Roots

Another thought, although I’m not sure if it’s related - both blade-ui-kit/blade-icons and log1x/sage-svg register @svg directives. If you reinstall blade-ui-kit/blade-icons, uninstall log1x/sage-svg , and run wp acorn optimize:clear does the @asset directive work?

1 Like
4

I followed your instructions:

  • uninstalled log1x/sage-svg
  • reinstalled blade-ui-kit/blade-icons
  • run wp acorn optimize:clear

Same issue :frowning: