less css 页面加载时不呈现（瞬间）
less css not rendering (for a split second) on page load
我在样式表中使用的 css 较少。我也通过 xampp 在 localhost 中。
我的样式表在页面加载时无法呈现（瞬间）时出现问题。
页面在没有样式的情况下加载很快，然后在应用了样式后仅一瞬间加载。
有没有人在使用 less 时遇到过类似的问题？
header.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Feed</title>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<!-- style sheets -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/4.8.95/css/materialdesignicons.min.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-design-blocks/2.0.1/css/froala_blocks.min.css" />
<link rel="stylesheet/less" href="styles.less" />
<!-- scripts -->
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
</head>
<body style="font-family: 'Roboto', sans-serif;">
index.php
<?php
require 'navbar/navbar.php';
require 'header.php';
?>
<!-- My HTML source here -->
styles.less
@import 'whitetheme.variables.less';
/* styles are here */
whitetheme.variables.less
@dark-font-color: rgba(0,0,0, .9);
@medium-font-color: rgba(0,0,0, .8);
@light-font-color: rgba(0,0,0, .7);
@secondary-background: #fff;
@primary-gray: #f0f2f5;
@primary-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
@primary-blue: #4c8bf5;
less css not rendering (for a split second) on page load
- LESS 不是 CSS。
- 浏览器本身不支持使用 LESS 文件 (
*.less) 作为样式表。
- LESS 是一个为您生成 CSS 样式表文件的系统。
- LESS 旨在用作 构建过程 的一部分（您可以使用
npm run 或 Gulp 或 WebPack 将其自动化，或 Rollup，或 JavaScript 生态系统认为本月很酷的任何东西）。
- 您正在使用外部第三方脚本在浏览器中将 LESS 转换为 CSS，这是造成延迟的原因。
具体来说，这是你的问题：
<link rel="stylesheet/less" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>
您正在使用浏览器中 运行 的 LESS 处理器脚本 将您的 .less 文件转换为 CSS 样式表浏览器可以本机理解 - 这个过程是异步发生的，独立于浏览器加载页面。
这是正在发生的事情（按时间顺序，当您的浏览器加载页面时）：
- 浏览器加载您的
/ 页面（即 index.php 脚本的 HTML 输出）。
- 浏览器异步加载
styles.less。
- 但是，浏览器将同步加载
rel="stylesheet" 资源并阻止页面呈现。
- 浏览器同步加载
less.min.js（因为你没有使用 defer 或 async 属性）然后它 运行s 并处理你的 LESS 并转换它到 CSS。
- 但是
less.min.js 文件 将等待 直到 less.min.js 被加载。
- 正是在等待
less.min.js 文件期间，浏览器呈现您的页面（很快，不是吗？）没有 CSS 还没有的样式。
最好的解决方法是 运行 将 LESS 到 CSS 的转换步骤作为 项目构建过程 的一部分。我建议您阅读 npm 和其他内容，以便正确执行此操作。
像这样：
安装 Webpack 和 LESS:
cd your-project
npm init -y
npm install webpack webpack-cli --save-dev
npm install less less-loader --save-dev
配置 Webpack + LESS:
webpack.config.js:
module.exports = {
module: {
rules: [
{
test: /\.less$/i,
loader: [
// compiles Less to CSS
"style-loader",
"css-loader",
"less-loader",
],
},
],
},
};
运行 npx webpack
编辑您的 HTML:
- 删除
<script> 到 less.min.js。
- 更新
<link> 以指向第 3 步的输出 .css 文件。
找到问题。
而不是
<?php
require 'navbar/navbar.php';
require 'header.php';
?>
我只需要先要求我的 header
<?php
require 'header.php';
require 'navbar/navbar.php';
?>
我在样式表中使用的 css 较少。我也通过 xampp 在 localhost 中。 我的样式表在页面加载时无法呈现（瞬间）时出现问题。 页面在没有样式的情况下加载很快，然后在应用了样式后仅一瞬间加载。
有没有人在使用 less 时遇到过类似的问题？
header.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Feed</title>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<!-- style sheets -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/4.8.95/css/materialdesignicons.min.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-design-blocks/2.0.1/css/froala_blocks.min.css" />
<link rel="stylesheet/less" href="styles.less" />
<!-- scripts -->
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
</head>
<body style="font-family: 'Roboto', sans-serif;">
index.php
<?php
require 'navbar/navbar.php';
require 'header.php';
?>
<!-- My HTML source here -->
styles.less
@import 'whitetheme.variables.less';
/* styles are here */
whitetheme.variables.less
@dark-font-color: rgba(0,0,0, .9);
@medium-font-color: rgba(0,0,0, .8);
@light-font-color: rgba(0,0,0, .7);
@secondary-background: #fff;
@primary-gray: #f0f2f5;
@primary-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
@primary-blue: #4c8bf5;
less css not rendering (for a split second) on page load
- LESS 不是 CSS。
- 浏览器本身不支持使用 LESS 文件 (
*.less) 作为样式表。 - LESS 是一个为您生成 CSS 样式表文件的系统。
- LESS 旨在用作 构建过程 的一部分（您可以使用
npm run或 Gulp 或 WebPack 将其自动化，或 Rollup，或 JavaScript 生态系统认为本月很酷的任何东西）。
- LESS 旨在用作 构建过程 的一部分（您可以使用
- 您正在使用外部第三方脚本在浏览器中将 LESS 转换为 CSS，这是造成延迟的原因。
具体来说，这是你的问题：
<link rel="stylesheet/less" href="styles.less" /> <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>
您正在使用浏览器中 运行 的 LESS 处理器脚本 将您的 .less 文件转换为 CSS 样式表浏览器可以本机理解 - 这个过程是异步发生的，独立于浏览器加载页面。
这是正在发生的事情（按时间顺序，当您的浏览器加载页面时）：
- 浏览器加载您的
/页面（即index.php脚本的 HTML 输出）。 - 浏览器异步加载
styles.less。- 但是，浏览器将同步加载
rel="stylesheet"资源并阻止页面呈现。
- 但是，浏览器将同步加载
- 浏览器同步加载
less.min.js（因为你没有使用defer或async属性）然后它 运行s 并处理你的 LESS 并转换它到 CSS。- 但是
less.min.js文件 将等待 直到less.min.js被加载。
- 但是
- 正是在等待
less.min.js文件期间，浏览器呈现您的页面（很快，不是吗？）没有 CSS 还没有的样式。
最好的解决方法是 运行 将 LESS 到 CSS 的转换步骤作为 项目构建过程 的一部分。我建议您阅读 npm 和其他内容，以便正确执行此操作。
像这样：
安装 Webpack 和 LESS:
cd your-project npm init -y npm install webpack webpack-cli --save-dev npm install less less-loader --save-dev配置 Webpack + LESS:
webpack.config.js:
module.exports = { module: { rules: [ { test: /\.less$/i, loader: [ // compiles Less to CSS "style-loader", "css-loader", "less-loader", ], }, ], }, };运行
npx webpack编辑您的 HTML:
- 删除
<script>到less.min.js。 - 更新
<link>以指向第 3 步的输出.css文件。
- 删除
找到问题。
而不是
<?php
require 'navbar/navbar.php';
require 'header.php';
?>
我只需要先要求我的 header
<?php
require 'header.php';
require 'navbar/navbar.php';
?>