Roots Discourse

CSS image path erros

sage webpack
#1

Sage documentation says the background image path for images in css should be: …/images/image.jpg. I get an error “This relative module was not found:” I have looked through the forum and cannot find an answer.

The other error i get is: Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The "from" argument must be of type string. Received undefined

My dev url and proxy:
“devUrl”: “beagleboard.test”,
“proxyUrl”: “http://127.0.0.1:3000”,

2 Likes
#2

Im stuck on the same error, but trying to add fonts.

Using a new fonts.scss file, with @font-face {...}

with sage9.0.10, tailwind

#3

@daadir @diomededavid

Hi, this is not the same issue with postcss on sage 9.0.10 ? Try to downgrade some dependencies.

#4

Thank you.
Downgrading the following dependencies below helped, but did not solve the issue. I had to

downgrade the dependencies and add add ‘esModule: false,’ to lines 107 and 118 to the webpack.config, which solved the issue for me as well as increasing the limits.

“postcss-loader”: “~2.1.0”,
“postcss-safe-parser”: “~3.0”,
“resolve-url-loader”: “~2.3.1”,
“url-loader”: “^0.6.2”,

      {
    test: /\.(ttf|otf|eot|woff2?|png|jpe?g|gif|svg|ico)$/,
    include: config.paths.assets,
    loader: 'url',
    options: {
      esModule: false,
      limit: 5096,
      name: `[path]${assetsFilenames}.[ext]`,
    },
  },
  {
    test: /\.(ttf|otf|eot|woff2?|png|jpe?g|gif|svg|ico)$/,
    include: /node_modules/,
    loader: 'url',
    options: {
      limit: 5096,
      esModule: false,
      outputPath: 'vendor/',
      name: `${config.cacheBusting}.[ext]`,
    },
  },
#5

Same problem here, downgrading and adding the esModule in webpack.config didn’t work for me. It seems you have to downgrade file-loader as well so only downgrading file-loader and resolve-url-loader was enough.

“file-loader”: “^1.1.6”,
“resolve-url-loader”: “~2.3.1”,

#6

I got it to work by increasing file size limits and workarounds/hacks I would have preferred not to use (inline background styles) and also not using the css background declaration.