# Module not found: Error: Can't resolve

**URL:** https://discourse.roots.io/t/module-not-found-error-cant-resolve/22272
**Category:** sage
**Tags:** sass, bud, sage10
**Created:** 2022-02-07T15:24:59Z
**Posts:** 9

## Post 1 by @adamalexanderw — 2022-02-07T15:24:59Z

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?

---

## Post 2 by @ben — 2022-02-07T16:29:01Z

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

---

## Post 3 by @adamalexanderw — 2022-02-07T16:44:23Z

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%);
}
```

---

## Post 4 by @ben — 2022-02-07T22:12:10Z

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](https://github.com/roots/sage/pull/2952) and [https://github.com/roots/sage/pull/2959](https://github.com/roots/sage/pull/2959) to see the updates required in Sage since beta 2 to use the latest Bud

---

## Post 5 by @adamalexanderw — 2022-02-08T10:29:05Z

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');
```

---

## Post 6 by @ben — 2022-02-08T20:39:09Z

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

---

## Post 7 by @adamalexanderw — 2022-02-10T13:44:55Z

That seems to work – thanks!

---

## Post 8 by @evankford — 2022-04-28T18:36:22Z

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?)

---

## Post 9 by @zzzap — 2022-04-29T08:52:41Z

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');
```