Module not found: Error: Can't resolve

sage
, ,
1

Hi

I have just upgraded from sage 10 to the new beta 2 release with bud.

I am getting this error when running npm run dev

✘ Module not found: Error: Can't resolve './fonts/Buffalo-Regular.ttf' in './resources/styles'
✘ Module not found: Error: Can't resolve './images/chevron.svg' in './resources/styles'

I’ve also got sass installed using yarn add @roots/bud-sass --dev

There are many more messages like the above – those two are just examples. It seems to be only the images and fonts folder though.

Is there something I’m missing?

2

Can you please post your modified styles? Hard to diagnose without knowing the input :smiley:

3

Sorry about that, for example I have a main app.scss with all the imports in

@import 'components/header';
@import 'components/forms';
@import 'components/whitespace';
@import 'components/type';

And inside type.scss – Just a standard @font-face setup

@font-face {
    font-family: 'Buffalo';
    src: url('../fonts/Buffalo-Regular.eot');
    src: url('../fonts/Buffalo-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Buffalo-Regular.woff2') format('woff2'),
         url('../fonts/Buffalo-Regular.woff') format('woff'),
         url('../fonts/Buffalo-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

Or for example any background image fails (header.scss):

&:before {
	content: '';
	width: 12px;
	height: 12px;
	background: url('../images/chevron.svg') no-repeat center center;
	background-size: contain;
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
}
4

Thank you! Do you know if you’re using Bud v5 or v5.2.0? Beta 2 shipped with v5, but there’s been a couple updates since with v5.1.0 and v5.2.0 which should have these issues resolved

See https://github.com/roots/sage/pull/2952 and https://github.com/roots/sage/pull/2959 to see the updates required in Sage since beta 2 to use the latest Bud

5

I’m on v5.2.0 – my package.json is as follows:

"devDependencies": {
    "@roots/bud": "^5.2.0",
    "@roots/bud-eslint": "^5.2.0",
    "@roots/bud-postcss": "^5.2.0",
    "@roots/bud-prettier": "^5.2.0",
    "@roots/bud-sass": "^5.2.0",
    "@roots/bud-stylelint": "^5.2.0",
    "@roots/bud-tailwindcss": "^5.2.0",
    "@roots/sage": "^5.2.0"
  },

The problem seems to happen as soon as I change app.css to app.scss. It compiles fine if it’s not using sass. My bud file for reference:

/**
 * @typedef {import('@roots/bud').Bud} bud
 *
 * @param {bud} app
 */
module.exports = (app) =>
  app
    /**
     * Application entrypoints
     *
     * Paths are relative to your resources directory
     */
    .entry({
      app: ['scripts/app.js', 'styles/app.scss'],
      editor: ['scripts/editor.js', 'styles/editor.css'],
    })

    /**
     * These files should be processed as part of the build
     * even if they are not explicitly imported in application assets.
     */
    .assets([app.path('src', 'images')], [app.path('src', 'fonts')])

    /**
     * These files will trigger a full page reload
     * when modified.
     */
    .watch([
      'tailwind.config.js',
      'resources/views/**/*.blade.php',
      'app/View/**/*.php',
    ])

    /**
     * Target URL to be proxied by the dev server.
     *
     * This is your local dev server.
     */
    .proxy('http://demo.test');
6

For your paths, instead of ../fonts and ../images, could you try ../../fonts and ../../images/?

1 Like
7

That seems to work – thanks!

1 Like
8

Hey! Wanted to follow up here as I had similar issues that I fixed and thought it could be useful:

In mix-based builds in sage < 10 (including the beta), you needed to reference the final path in .scss assets – for instance : url('../fonts/fontello.woff);, even if your .scss file was not siblings with the the /fonts directory. This is because the compiled file kept the same url, so you needed the correct reference between compiled assets.

Bud resolves the reference during compliation, so you can use the correct path between the assets in your src/ folder. The path will be correctly updated in the output!

Here’s an example:

  • Let’s say you have a .scss file ./src/styles/core/typography.scss.
  • It’s trying to load the font ./src/fonts/fontello.woff.
  • Your reference in the .scss file would be url('../../../fonts/fontello.woff');. (Eventually, we should get aliases to work here, right?)
9

Just wanted to let you know that aliases do work, and if you are using the @roots/sage Bud extension you can use the @fonts alias. My font imports look like this
resources/styles/_fonts.scss

/* prettier-ignore */
@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('~@fonts/roboto/roboto-v29-latin-regular.eot');
  src:
    local(''),
    url('~@fonts/roboto/roboto-v29-latin-regular.eot?#iefix') format('embedded-opentype'), 
    url('~@fonts/roboto/roboto-v29-latin-regular.woff2') format('woff2'),
    url('~@fonts/roboto/roboto-v29-latin-regular.woff') format('woff'),
    url('~@fonts/roboto/roboto-v29-latin-regular.ttf') format('truetype');
2 Likes