baseDir changes with browser size

[sibble]

#rx-required-icon {
    width: 60px;
    height: 60px;
    float: left;
    background: url('@{baseDir}images/nw_lg_rx.png') 0 0 no-repeat;
}

This is at the top of my theme.less outside of any media queries.  When the browser is full size, the image shows and everything works.  When I shrink the browser the image disappears.  The url changes for the image.

Browser Desktop Size:

pub/static/version1514921420/frontend/Cfspharmacy/default/en_US/images/nw_lg_rx.png

Browser Mobile Size:

pub/static/version1514921420/frontend/Cfspharmacy/default/en_US/mage/images/nw_lg_rx.png

When the browser is shrunk, gallery.css (not sure what that is) overrides styles-l.css and styles-m.css with the bad url.

Any help is greatly appreciated.

Thanks

[sibble]

Could this be a bug?

[KarlaSa]

I tested your issue and in my own store writing less before any media queries does not break path or atleast it's not common bug. (It may be your theme specific bug)

But also if u mean "theme.less" is theme/web/css/source/_theme.less" then you should not write code theme. It's ment for existing variables override ONLY. 
And in Magento 2 you should define media by default anyways atleast like this: 
& when (@media-common = true) {

.class {
color: #fff;
}

}
Hope It helps somehow