Question

我正在使用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'] }
}

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

Answer 1

在单独的控制器操作中执行此操作：

layout.html.erb

# 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

样式表显示控制器操作

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")

然后，您可以在模板中包含ERB变量。请注意，这将在每个负载上通过sass引擎进行，因此您需要将其缓存在生产中。

如果你想把你所有的sass组织成单独的文件，只需将你的变量放在一个文件中呈现为ERB，其余的只是作为文本文件读入。

"autoCompleteSetBy":{"id":xxx}

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

1 个答案: