使用 Rails + Webpack 加载动态 SCSS 文件答案

【问题标题】：Load dynamic SCSS file with Rails + Webpack使用 Rails + Webpack 加载动态 SCSS 文件
【发布时间】：2018-02-24 02:57:34
【问题描述】：

我正在使用 gem rails/webpack 来构建资产，但我需要根据品牌构建动态 SCSS，例如：

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

body {
   background: $primary-color;
}

我已经尝试添加加载器：

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

但这没有用。有没有办法做这样的事情？

【问题讨论】：

Webpack 不会通过 ERB 解释器运行资产 - 但是 Sprockets 会。您还需要注意，资产通常在部署时编译，因此任何变量都不能基于请求。更好的解决方案可能是使用 HTML 中的类在要使用的样式表中设置不同的规则。

标签： ruby-on-rails sass webpack-dev-server ruby-on-rails-5.1 sass-loader

【解决方案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 引擎，因此您需要在生产环境中缓存它。

如果您想将所有 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")

【讨论】：

哇，多么好的解决方案 :) 也许我可以尝试一下，但现在，我为每个公司创建一个 .scss 文件，并在布局时导入它们：<%= stylesheet_pack_tag 'login-' + @company.sub_domain %> 不是最好的解决方案，但它部分解决了我的问题。
当您获得多个客户端时，您很快就会遇到扩展问题 ;-)。上述技术一旦开始就不需要花费很多时间来实施。但是，是的 - 这是一个很好的方法。

【解决方案2】：

rails 应用中的变量：

module Constants
  COLORS = {
     COLOR1: '#ff0000',
     COLOR2: '#880000',
  }
end

使用 Hash var 传递给 sass：

$colors: (<% Constants::COLORS.each do |name, color| %><%= name %>: <%= color %>,<% end %>)

在你的样式文件中使用变量：

body
  color: map-get($colors, 'COLOR1')

【讨论】：