草庐IT

javascript - 页面加载前的 Webpack SCSS "Flicker"

coder 2024-05-12 原文

我正在开发一个同构的 React+Flux+express 应用程序，并为我的 sass(带有 sass-loader)和 jsx 文件使用 webpack 加载器。我不确定如何将样式表注入(inject)服务器端模板。为此，我查看了 Extract Text Plugin，但我真的希望能够使用热模块替换。 现在，我正在像这样在 React 组件中加载我的 main.scss 文件:

if (typeof window !== 'undefined') {
  require("!style!css!sass!../../../styles/main.scss");
}

这适用于在组件中加载单个样式表，但在安装 React 部分之前会出现闪烁。我知道这是因为这是在我的客户端应用程序加载后 注入(inject)样式表，因此样式表不会立即可用。 这就引出了一个真正的问题:有没有办法在仍然使用 webpack 加载器的同时将这个样式表注入(inject)我的服务器端模板，或者这是否需要单独的 gulpfile 或 express 中间件？我以前使用 gulpfile 来构建我的样式表，但我最终会有很多样式表并且不希望它们全部塞进一个文件中。

最佳答案

所以这里的想法是让 webpack 使用两个单独的配置进行编译，一个针对 web(浏览器)，另一个针对 node(服务器端) .在其他节点/快速代码中可能需要服务器端包来使用 css 构建预呈现的 HTML。

这里有一个完整的示例，我将向您介绍其中的相关部分。 https://github.com/webpack/react-starter

app 中的prerender.html 是作者使用的服务器端模板。注意下面两行代码:

<link rel="stylesheet" href="STYLE_URL">
<script src="SCRIPT_URL"></script>

在此处查看 webpack 的配置 https://github.com/webpack/react-starter/blob/master/make-webpack-config.js .传递到此处的选项取决于您是在进行生产构建还是开发构建。由于我们要构建客户端包和预渲染服务器包，让我们看一下 https://github.com/webpack/react-starter/blob/master/webpack-production.config.js .它创建了两个包，特别是第一个具有针对浏览器的单独样式表，第二个配置用于预呈现。

对于第一次编译，它使用这个:

plugins.push(new ExtractTextPlugin("[name].css" + (options.longTermCaching ? "?[contenthash]" : "")));

在您的包旁边创建一个单独的 css 文件。在第二次编译(用于预渲染)期间，它使用 null-loader 加载样式(因为我们已经在 css 文件中拥有我们需要的样式，我们可以直接使用它)。

现在这是我们将 css 路径注入(inject)服务器模板的地方。 在这里看一下简化的 server.js:https://github.com/webpack/react-starter/blob/8e6971d8fc9d18eeef7818bd6e9be45f6b8643e6/lib/server.js 

var STYLE_URL = "main.css?" + stats.hash;
var SCRIPT_URL = [].concat(stats.assetsByChunkName.main)[0];
app.get("/*", function(req, res) {
    res.contentType = "text/html; charset=utf8";
    res.end(prerenderApplication(SCRIPT_URL, STYLE_URL, COMMONS_URL));
});

假设您的包的输出路径与 server.js 相同(否则您可以使用 require("../build/stats.json").publicPath 获取 publicPath 并将其添加到前面到上面的 STYLE_URL 和 SCRIPT_URL。

然后在您的 prerender.jsx 中:https://github.com/webpack/react-starter/blob/8e6971d8fc9d18eeef7818bd6e9be45f6b8643e6/config/prerender.jsx 获取服务器端模板 prerender.html 并替换 URL:

var html = require("../app/prerender.html");
module.exports = function(scriptUrl, styleUrl, commonsUrl) {
    var application = React.renderComponentToString(<Application />);
    return html.replace("STYLE_URL", styleUrl).replace("SCRIPT_URL", scriptUrl).replace("COMMONS_URL", commonsUrl).replace("CONTENT", application);
};

我承认这可能会很复杂和令人困惑，如果使用单独的 gulpfile 更容易，那就去做吧。但是一定要玩这个。如果您需要更多说明和帮助，您可以发表评论，我会尽快处理，或者您可以在此处使用 webpack 聊天室 (https://gitter.im/webpack/webpack)，我相信其中一位开发人员可能可以给你一个比我更好的解释。

希望这有点(？)有帮助!

关于javascript - 页面加载前的 Webpack SCSS "Flicker"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28569686/

javascriptampcodewebpackreact-startercssexpressreactjs

有关javascript - 页面加载前的 Webpack SCSS "Flicker"的更多相关文章

  1. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

  2. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  3. ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2

    为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar

  4. ruby - 如何在续集中重新加载表模式？ - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  5. ruby-on-rails - 迷你测试错误 : "NameError: uninitialized constant" - 2

    我遵循MichaelHartl的“RubyonRails教程:学习Web开发”，并创建了检查用户名和电子邮件长度有效性的测试(名称最多50个字符，电子邮件最多255个字符)。test/helpers/application_helper_test.rb的内容是:require'test_helper'classApplicationHelperTest在运行bundleexecraketest时，所有测试都通过了，但我看到以下消息在最后被标记为错误:ERROR["test_full_title_helper",ApplicationHelperTest,1.820016791]test

  6. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  7. ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2

    我正在尝试从Postgresql表(table1)中获取数据，该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中，我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤，而不是严格相等。然而，这是行不通的:scope:my_scope,->(que

  8. 使用 ACL 调用 upload_file 时出现 Ruby S3 "Access Denied"错误 - 2

    我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常，除了该文件不是公开可用的，而且我无法获得它的公共(public)URL。但是当我登录到S3时，我可以正常查看我的文件。为了使其公开可用，我将最后一行更改为obj.upload_file(file

  9. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  10. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项？ - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

随机推荐