Rails: stylesheet path in js file on production

Question

In my js file I have some configs like

skel.init({
        reset: 'full',
        containers: '100%',
        breakpoints: {
            global: { href: '/assets/skel/style.scss', grid: { gutters: ['2.5em', 0] } },
            xlarge: { media: '(max-width: 1800px)', href: '/assets/skel/style-xlarge.scss' },
            large: { media: '(max-width: 1280px)', href: '/assets/skel/style-large.scss', grid: { gutters: ['2em', 0] } },
            medium: { media: '(max-width: 980px)', href: '/assets/skel/style-medium.scss'},
            small: { media: '(max-width: 736px)', href: '/assets/skel/style-small.scss', grid: { gutters: ['1.5em', 0] }, viewport: { scalable: false } },
            xsmall: { media: '(max-width: 480px)', href: '/assets/skel/style-xsmall.scss' }
        }
    });

as you can see there are href s for css files like href: '/assets/skel/style.scss' which contain in app/assets/stylesheets/skel directory. In development it works perfect, but on production assets compiling and js can't find those css files.

I tried to add config.assets.precompile += ['skel/*'] to production.rb to compile skel assets to skel directory but it didn't help

Answer 1

If you add .erb extension to your javascript file, you can use asset_path helpers inside javascript which will be expanded properly on assets precompile. For example, make your javascript file to be some_filename.js.erb , then inside, you can set up paths to CSS like this:

global: { href: '<%= stylesheet_path "skel/style" %>', grid: { gutters: ['2.5em', 0] } }

and so on...

For reference, see http://api.rubyonrails.org/classes/ActionView/Helpers/AssetUrlHelper.html#method-i-stylesheet_path to figure out how stylesheet_path expands.