SASS負載動態變量的WebPack內軌

我使用的寶石rails/webpack建資產，但我需要通過品牌建設，根據動態SCSS，如：SASS負載動態變量的WebPack內軌

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

body { 
    background: $primary-color; 
}

我曾嘗試加入裝載機：

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

但這並不奏效。有沒有辦法做到這樣的事情？

來源

2017-09-15 heber gentilin

Webpack將不會通過ERB解釋器運行資產 - 鏈輪然而。您還需要了解資產通常是在部署時編譯的，因此任何變量都不能以請求爲基礎。更好的解決方案可能是使用HTML中的類在樣式表中設置不同的規則以供使用。 – max

在一個單獨的控制器動作做到這一點：

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

然後，您可以包括僱員再培訓局的變量中模板。請注意，這將通過每個負載上的sass引擎進行處理，因此您需要將其緩存到生產環境中。

如果你想保持你所有的文件很好地組織在單獨的文件中，只需將你的變量放在一個文件中作爲ERB呈現，其餘的文件只是作爲文本文件讀取。

rendered_sass = [render_to_string("stylesheets/colours", :layout => false), 
    File.read(Rails.root.join("app", "javascript", "stylesheets", "main.scss")), 
    File.read(Rails.root.join("app", "javascript", "stylesheets", "base.scss")), 
    File.read(Rails.root.join("app", "javascript", "stylesheets", "reset.scss")), 
    File.read(Rails.root.join("app", "javascript", "stylesheets", "type.scss")), 
    File.read(Rails.root.join("app", "javascript", "stylesheets", "layout.scss")), 
    File.read(Rails.root.join("app", "javascript", "stylesheets", "map.scss")), 
    File.read(Rails.root.join("app", "javascript", "stylesheets", "audio-player.scss")), 
    File.read(Rails.root.join("app", "javascript", "stylesheets", "slider.scss"))].join("\n\r")

來源

2018-03-09 04:09:49 barnaclebarnes

哇，什麼解決方案:)也許我嘗試了，但現在，我創建一個單一的.scss文件給每個公司，並在佈局，我導入它們：''<％= stylesheet_pack_tag'login-'+ @company .sub_domain％>''' 不是最好的解決方案，但它部分解決了我的問題。 –

SASS負載動態變量的WebPack內軌

回答

相關問題