SASS負荷動的変数私は資産を構築するために宝石<a href="https://github.com/rails/webpacker" rel="nofollow noreferrer">rails/webpack</a>を使用していますが、私はブランド別係るダイナミックSCSSを構築する必要がある、のような

Question

レール：

//admin.scss 
@import 'variables-<%= 'brand-name' %>'; 

body { 
    background: $primary-color; 
} 

私はローダーを追加しようとしています：

{ 
    test: /\.scss(\.erb)?/, 
    loader: 'sass-loader', 
    options: { importExtensions: ['.scss', '.scss.erb', '.css'] } 
} 

しかし、それは機能しませんでした。 そのようなことをする方法はありますか？

Answer 1

別々のコントローラのアクションでこれを行います

layout.html.erb

<%= stylesheet_link_tag stylesheet_path() %>

スタイルシートを表示するコントローラのアクションを

# Render the template to a string 
css = Sass::Engine.new(
    render_to_string("path/to/erb_template", :layout => false), 
    syntax:  :scss, 
    cache:  false, 
    read_cache: false, 
    style:  :standard, 
    sprockets: { 
    context:  self.view_context, 
    } 
).render 

# respond with the rendered string 
respond_to do |format| 
    format.css { render plain: css, :content_type => "text/css" } 
end 

あなたは、その後にERB変数を含めることができますテンプレート。これは、すべての単一の負荷でSassエンジンに渡されるため、実稼働環境でキャッシュする必要があることに注意してください。

あなたのお尻をきれいに別々のファイルにまとめるには、変数を1つのファイルに入れてERBとしてレンダリングし、残りはテキストファイルとして読み込みます。