`url` files not found

[Intrepidd]

I'm trying to compile my style which has references to font files via src: url("../path/some-font.ttf")

I'm getting the following error :

 > ../../../../var/folders/5l/br5w2k5d4f32hmcysvmf0gjh0000gn/T/tmp-22896-OBMEyq54PUj8/17babdb14690/application.css:2281:11: error: Could not resolve "../path/some-font.ttf"
    2281 │   src: url('../path/some-font.ttf');
         ╵            ~~~~~~~~~~~~~~~~~~~~
    at failureErrorWithLog (homepath/node_modules/esbuild/lib/main.js:1451:15)
    at homepath/node_modules/esbuild/lib/main.js:1131:28
    at runOnEndCallbacks (homepath/node_modules/esbuild/lib/main.js:921:63)
    at buildResponseToResult (homepath/node_modules/esbuild/lib/main.js:1129:7)
    at homepath/node_modules/esbuild/lib/main.js:1238:14
    at homepath/node_modules/esbuild/lib/main.js:609:9
    at handleIncomingPacket (homepath/node_modules/esbuild/lib/main.js:706:9)
    at Socket.readFromStdout (homepath/node_modules/esbuild/lib/main.js:576:7)
    at Socket.emit (events.js:315:20)
    at addChunk (internal/streams/readable.js:309:12)

Am I missing something ?

Thanks !

[Intrepidd]

I managed to fix this by adding require('postcss-url')({ url: 'inline' }) to my postcss plugins, hope it can help.

cc @thanosbellos and @dubstepKnight who 👍 this post

[martpie]

I'm sorry @Intrepidd, where did you use this code exactly? Are you handling PostCSS with custom plugins that you're able to manage yourself?

[Intrepidd]

@martpie Yes !

I don't use the esbuild cli, I rather use a build.js file. It is documented here

Mine looks like this :

const esbuild = require('esbuild')
const postCssPlugin = require('esbuild-plugin-postcss2')
const { stimulusPlugin } = require('esbuild-plugin-stimulus')

esbuild.build({
  entryPoints: [
    'app/packs/entrypoints/application.js',
    'app/packs/entrypoints/foundation_emails.js',
    'app/packs/entrypoints/uppy.css',
    'app/packs/entrypoints/tinymce.css'
  ],
  bundle: true,
  splitting: true,
  format: 'esm',
  outdir: 'app/assets/builds',
  target: 'es2016',
  watch: process.argv.includes('--watch'),
  plugins: [
    stimulusPlugin(),
    postCssPlugin.default({
      plugins: [
        require('postcss-import'),
        require('postcss-url')({ url: 'inline' }),
        require('tailwindcss')({ config: './app/packs/css/tailwind.cjs' }),
        require('autoprefixer'),
        require('postcss-flexbugs-fixes')
      ]
    })
  ]
}).then(result => {
  console.log(result)
})

[martpie]

Ooooh, in the postcss plugins section, I see. I worked for me as well, thank you so much!

On a sidenote, I guess allowing loading CSS from node_modules but using the "native" CSS loader rather than esbuild-plugin-postcss2) would prevent this kind of things.

[thomasgrade]

@Intrepidd I use require('postcss-url')({ url: 'inline' }) in my config to resolve less file, but i got nothing. here is my config: after build i get nothing but js file. could you tell how to fix it ?

[Intrepidd]

@thomasgrade i don't think this is related to this plug-in.

Are you importing your less files properly from your js / ts?

On a side note, I decided to run postcss standalone to generate my css rather than running it within esbuild, as I encountered other problems down the road

[thomasgrade]

@Intrepidd when i use config like this i can get js and css file, like this: but this config cannot resovle url() in less. it will throw error as above. when i use require('postcss-url')({ url: 'inline' }),it do not throw error. but css file disappear in lib folder