Is there way to use static images in styles folder?

[xquezme]

/styles/pattern.scss

.pattern {
  background-image: './static/pattern.png';
}

/components/SomeComponent.scss

.someStyle {
  composes: pattern from '../styles/pattern.scss';
}

Work as expected (btw, only with precss), but as global:

:global {
  .pattern {
    background-image: './static/pattern.png';
  }
}

Can't resolve file.

[dvdzkwsk]

Since static files are served from the root of the app server, what if you just tried /pattern.png? I can't test this locally right now, but that's my first guess.

Edit: Unless those static images aren't actually within ~/src/static and are in ~/src/styles/static, in which case ignore me.

[SimonSelg]

@davezuko : Using just background-image: url(pattern.png) won't work because url-loader will expect pattern.jpg to be at ~/src/pattern.jpg, but it is in ~/src/static/pattern.jpg (possible improvement here: let url-loader ignore url(..) expressions that point to the static folder).

@xquezme : What you can do is: Put the image in a folder which is not the static folder (because the static folder is for assets that are not required anywhere in the source code, and all url(...) expression in (s)css files are processed by webpack which means they are required), let's assume you put it in ~/src/assets/images/

Then:

~/src/styles/pattern.scss

.pattern {
  background-image: url('assets/images/pattern.jpg');
}

~/src//components/SomeComponent.scss

.someStyle {
  composes: pattern from 'styles/pattern.scss';
  height: 50px;
  width: 50px;
}

That works, because now url-loader will be able to locate the image and bundle it correctly.

Edit: Same as davezuko - if those static images aren't actually within ~/src/static and are in ~/src/styles/static, this does not apply.

[xquezme]

Actually it is:

~/src/static/pattern.jpg
~/src/styles/pattern.scss

Thanks @SimonSelg, but IMO it's better to use one source for handling static files.

[flipjs]

Maybe we can add an example, like in the counter page, have a banner image or something, and this is reference in the styles. That way, we know where and how to use it.

[dvdzkwsk]

Will be adding an example once some of the current issues are fixed.

[dvdzkwsk]

@SimonSelg working on an example and am myself struggling with a clean implementation. The ~/src/assets folder makes sense, but as @xquezme said it is a bit confusing to separate these files out. You're definitely more experienced when it comes to CSS modules (seeing as you're the guru responding to all related issues :P), so wondering if you've had any additional thoughts on this since your last comment.

I've been incredibly swamped w/ work and only just today managed to push up a bunch of fixes, so I'll try to look into url-loader sometime later today, but wanted to ping you just in case you had any other ideas.

[dvdzkwsk]

Moving to FAQ.