简体   繁体   English

custom-cra 将 CSS 压缩并嵌入到 HTML 中

[英]customize-cra Minify and Embbeed CSS into HTML

I am working on a React project.我正在做一个 React 项目。 I want my CSS to be embedded into HTML itself without having a network call for CSS.我希望我的 CSS 嵌入到 HTML 本身中,而无需通过网络调用 CSS。

CSS CSS

body{
   background-color: #000000;
}

into one file like成一个文件,如

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
    <style>
    body{
      background-color: #000000;
    }
    </style>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

I have no knowledge of webpack I have setup customize-cra and have config-override.js file.我不了解 webpack 我已经设置了 custom customize-cra并且有config-override.js文件。

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

May be this is what you need "react-style-tag"可能这就是你需要的“react-style-tag”

From your post I think you want to have your styles inside the of your index.html file从您的帖子中,我认为您希望在 index.html 文件中包含您的样式

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何确定 css 在我的使用 webpack 和customize-cra 的创建反应应用程序构建中的顺序? - How to determine the order of css in my create react app build with webpack and customize-cra? 模块别名无法解决(CRA和custom-cra) - module alias cannot resolve for jest (CRA and customize-cra) 添加Webpack Alias使用react-app-rewired和customize-cra - Add Webpack Alias With react-app-rewired and customize-cra custom-cra 为 JEST 编译 node_modules - customize-cra to compile node_modules for JEST 如何将React-app-rewired与Customize-CRA集成 - How to integrate React-app-rewired with Customize-CRA custom-cra, (react-app-rewired) 如何覆盖路径 - customize-cra, (react-app-rewired) how to override paths 使用 react-app-rewired 和 customize-cra 时如何配置 Jest? - How configure Jest when using react-app-rewired and customize-cra? 从 v2.0 开始,“injectBabelPlugin”助手已被弃用。 您可以使用自定义 cra 插件代替 - The “injectBabelPlugin” helper has been deprecated as of v2.0. You can use customize-cra plugins in replacement custom-cra - 当前未启用对实验语法“jsx”的支持 - customize-cra - Support for the experimental syntax 'jsx' isn't currently enabled 在弹出的CRA中自定义Antd - Customize Antd in ejected CRA
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM