将css注入到多个html文件中，使用的是webpack 4(和webpack-dev-server)
将CSS注入到多个HTML文件中的最佳方法是使用Webpack 4和Webpack-dev-server。
首先，Webpack是一个模块打包工具，它允许您将各种资源（包括CSS文件）打包成一个或多个输出文件。Webpack-dev-server是一个开发服务器，它提供了实时重新加载功能，以便您在开发过程中进行更改时可以立即看到结果。
以下是实现将CSS注入到多个HTML文件中的步骤：
步骤1：安装Webpack和Webpack-dev-server
首先，您需要安装Node.js和npm（或yarn）。
然后，在项目根目录下运行以下命令来安装Webpack和Webpack-dev-server：
npm install webpack webpack-cli webpack-dev-server --save-dev步骤2：创建Webpack配置文件
在项目根目录下创建一个名为webpack.config.js的文件，并在其中添加以下内容：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
};在这个配置文件中，我们定义了一个入口文件（src/index.js），一个输出文件（dist/bundle.js），以及一个用于处理CSS文件的规则（使用style-loader和css-loader）。
步骤3：创建HTML文件
在src文件夹中创建一个或多个HTML文件，例如index.html和about.html。
步骤4：创建CSS文件
在src文件夹中创建一个CSS文件，例如styles.css。
步骤5：引入CSS文件
在HTML文件中引入CSS文件。您可以使用link标签将CSS文件链接到HTML文件中，例如：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>步骤6：运行开发服务器
在package.json文件中添加一个脚本命令，以便在开发过程中运行Webpack-dev-server。打开package.json文件，并在scripts部分添加以下内容：
"scripts": {
"start": "webpack-dev-server --open"
}然后，在命令行中运行以下命令来启动开发服务器：
npm startWebpack-dev-server将自动编译和重新加载您的项目，并将CSS注入到HTML文件中。
综上所述，使用Webpack 4和Webpack-dev-server可以轻松将CSS注入到多个HTML文件中。这种方法不仅方便了CSS的管理，还提供了实时重新加载功能，提高了开发效率。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 云数据库MySQL版（CDB）：https://cloud.tencent.com/product/cdb_mysql
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
相关·内容
我已经将css和js注入到dist/index.html和dist/jobs.html中，但似乎只有在使用webpack-dev- index.html时才会将css注入到js中。我正在尝试使用前面提到的here和HtmlWebpackP
浏览 74提问于2020-04-24得票数 0
在我的项目中，我使用webpack-dev-server热重新加载我的应用程序，我也使用html-webpack-plugin将javascript文件自动插入到模板文件中，但是当我使用webpack-dev-server时，注入包后的模板文件不会被写入磁盘，而是在内存中。我
浏览 0提问于2018-03-27得票数 0
回答已采纳
1回答
我有一个最低限度的webpack设置，并使用sass，css和风格加载程序来编译sass在我的项目。一切都很好，但我不明白为什么当我运行webpack -p时，我在包中得到了一些样式加载程序函数：如您所见，由于某种原因，节点模块被包括在内，基本上包括样式加载器和css-加载器。正常吗？
浏览 3提问于2017-10-16得票数 7
1回答
运行服务时“无法获得/”
、、、
我对webpack有点陌生。 "serve": "webpack-dev-server --config webpack.config.js --hot" "devDependencies文件的dist文件夹。根文件</
浏览 8提问于2021-12-05得票数 0
回答已采纳
这是我的webpack配置：var webpack = require('webpack') "start": "webpack-dev
浏览 4提问于2016-09-20得票数 10
我是新来的webpack，我面临着一个问题，试图建立一个简单的网页。虽然我在使用webpack-dev-server时没有问题，但是当我使用webpack构建应用程序时，我在index.html文件中看不到CSS。/node_modules/webpack-dev-server/bin/webpack-dev-server.
浏览 26提问于2019-07-12得票数 2
回答已采纳
我有一个静态html文件，我想要复制到目标包文件夹中。我目前正在使用CopyWebpackPlugin，副本部分工作正常。但是，我也希望注入生成的css包文件，该文件将作为链接标记注入。例如，如果生成的包css文件是1018ada2.css，那么它应该将下面的文本插入静态<e
浏览 6提问于2022-07-27得票数 0
我正试图与webpack 2建立肝脏。显然，实现这一点的方法是使HMR。所以，我在配置中做了这个var HtmlWebpackPlugin = require('html-webpack-plugin'); "deploy": "NODE_ENV=production webpack -p --pr
浏览 3提问于2017-03-24得票数 2
回答已采纳
我正在使用webpack-dev-server进行开发，但是在升级到webpack 5之后，当postcss-loader无法解析css文件时，它就会停止。我通过npx webpack-dev-server启动开发服务器，当我开始在.css中输入新规则时，webpack尝试重新构建我的应用程序，但是由于我还没有完成输入，所以文件中包含了不正确的<
浏览 14提问于2022-07-11得票数 0
回答已采纳
1回答
/sbin:/usr/local/opt/icu4c/bin:/usr/local/opt/icu4c/sbin:/usr/local/opt/icu4c/bin:/usr/local/opt/opensslThere is likely additional logging output above.
24 verbose exit [ 1,
浏览 5提问于2020-10-15得票数 0
1回答
我和webpack一样是Node.js应用程序的新手。在开发期间，我会运行webpack-dev-server来提供我的包，它会创建样式标签，并将所有的css放在上面。既然我不能运行webpack-dev-server，我该如何将css放在生产服务器上的样式标签中呢？
浏览 0提问于2017-04-08得票数 1
下面是一些背景知识：
我的公司的网站运行的CMS与CMS处理所有路由。没有html文件，只有剃刀文件(.cshtml)。虽然从头开始重做站点是我更愿意做的，但这不是一个选择，所以我正在尝试通过逐页地将vue.js与webpack的开发工作流程零散地集成在一起，慢慢地使站点现代化。我花了相当多的时间来设置webpack，让它只处理/dis
浏览 0提问于2017-02-03得票数 6
我正在尝试建立一个网络应用程序，我想在亚马逊s3上存储所有的html，js和css文件，并通过api与restful风格的服务器通信。但是，我找到的所有教程和示例都涉及到webpack-dev- server，这是一个小型节点ex
浏览 1提问于2015-09-10得票数 17
回答已采纳
我想捆绑几个html文件，并在所有这些文件中添加一个css文件。但是我的webpack配置只向index.html添加css和js绑定文件。我的文件看起来是这样的：
我想将这个main-hash.js和main-hash.css添加到所有的HTML<e
浏览 1提问于2019-06-21得票数 0
回答已采纳
问题是文件加载器总是将相同的URL注入到HTML和CSS文件中。
{
test: /\./图像’时，它会将流动的URL注入到HTML和CSS</e
浏览 0提问于2018-09-19得票数 0
回答已采纳
运行webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/时出错以下是错误日志：throw err;at Function.Module
浏览 41提问于2016-11-02得票数 230
回答已采纳
我将SASS添加到我的项目中，因为我喜欢为我的CSS使用SASS。在我的app文件夹中，我创建了CSS文件夹和SCSS文件夹。在我的webpack中，我添加了一个加载器来处理SCSS和SASS，并将需要的文件添加到我的package.json中</e
浏览 4提问于2016-12-10得票数 0
我正在将Vue.js集成到一个多页的PHP应用程序(不是SPA )中，我使用的是vue-cli webpack模板。仅对默认模板所做的修改就是添加多个入口点(用于为多个页面生成多个脚本)。对于我的开发环境，我通过我的lamp堆栈使用docker编写和服务页面，并在一个单独的实例上运行webpack</e
浏览 1提问于2018-02-27得票数 0
回答已采纳
我有一个静态站点，在那里我使用Vue和Webpack。为了生成超文本标记语言页面，我使用了<em
浏览 2提问于2018-06-09得票数 9
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
