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内轨

回答

相关问题