search

micromata / Baumeister

Unmaintained – :construction_worker: The aim of this project is to help you to build your things. From Bootstrap themes over static websites to single page applications.
MIT License
171 stars 37 forks source link

Resolving background-image path in SASS #265

Closed kristjankoppel closed 5 years ago

kristjankoppel commented 5 years ago

Hi!

I'm testing out Baumeister and everything is suiting exactly my needs. Only thing i can't figure out is how i reffer to images in my scss file?

I have code like that: .image-emotional { background: url('../../img/bg-door_handle.svg') no-repeat right 50%; } This css is located in: src/assets/scss/theme/site-header.scss and this file is imported in src/assets/scss/_theme.scss

And i keep on getting error like: ` Failed to compile.

./src/assets/scss/index.scss Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../../img/bg-door_handle.svg' in '/Users/kristjankoppel/Propxls/clients/palun_segada/src/assets/scss' `

Didn't find anything from documentation and under issues. I've tried all kinds of different ways to get image: assets/img/bg-door_handle.svg etc

kristjankoppel commented 5 years ago

Just when you start to lose all hope solution comes.

Correct way in SCSS is like that: background: url('/assets/img/bg-door_handle.svg'); Path have to start with /

One enhancement idea for documentation - maybe you can write also if there is resolve aliases for Javascript and SASS that can be used for easier asset referencing. A'la something like: ~ resolves to node_modules or ~@images/ resolves to assets/img

But otherwise - great job Baumeister team & superb documentation.

mischah commented 5 years ago

Thanks for the feedback 😘