如何像在一个main.css中添加所有css文件那样包含所有js文件？
在前端开发中，可以使用以下几种方法来像在一个main.css中添加所有css文件那样包含所有js文件：
- 使用HTML标签：
在HTML文件中，可以使用
<script>标签来引入外部的JavaScript文件。通过在<script>标签中设置src属性，可以指定要引入的JavaScript文件的路径。可以在<script>标签中多次使用该方法来引入多个JavaScript文件。例如：<script src="script1.js"></script> <script src="script2.js"></script> <script src="script3.js"></script> - 使用JavaScript的动态加载：
在JavaScript中，可以使用
document.createElement()方法动态创建<script>标签，并设置其src属性来加载外部的JavaScript文件。可以通过在JavaScript代码中多次使用该方法来加载多个JavaScript文件。例如：var script1 = document.createElement('script'); script1.src = 'script1.js'; document.head.appendChild(script1);
var script2 = document.createElement('script');
script2.src = 'script2.js';
document.head.appendChild(script2);
var script3 = document.createElement('script');
script3.src = 'script3.js';
document.head.appendChild(script3);
- 使用构建工具： 在复杂的前端项目中，可以使用构建工具（如Webpack、Parcel、Rollup等）来管理和打包JavaScript文件。通过配置构建工具，可以将多个JavaScript文件打包为一个文件，并在HTML中引入该打包后的文件。具体的配置和使用方法可以根据所选用的构建工具进行参考。
以上是几种常见的方法来像在一个main.css中添加所有css文件那样包含所有js文件。根据具体的项目需求和开发环境，选择合适的方法来管理和加载JavaScript文件。
相关·内容
我在一个Liferay portlet中使用了多个css和js文件。liferay portlet.xml文件中包含的CSS和JS文件会自动包含在页面中。
除了在XML文件中提到的文件，我使用外部CSS和JS文件使用链接和脚本标记。
如何缩小这些文件？
或
<portlet>
<portlet-name>demo-page</portlet-name>
<icon>/icon.png</icon>
<header-portlet-css>/css/main.css</header-portle
浏览 1提问于2016-05-20得票数 0
我有一个非常简单的Webpack 5配置，我正在尝试导入图像，以便在我的反应应用程序。我可以导入图像并使用它，而不需要Webpack抱怨：
import SomeImage from 'assets/some-image-jpg'
...
<img src={SomeImage} />
但是，在浏览器中找不到图像。我使用webpack-清单插件和devServer选项writeToDisk通过Django为资产服务。JS和CSS按预期工作。
const path = require('path');
const { WebpackManifestPl
浏览 4提问于2021-03-19得票数 2
我正在使用Symfony2，我遇到了一些问题，包括CSS和JS文件在Symfony2模板中。
我有一个名为Webs/HomeBundle的包，里面有HomeController和indexAction，它呈现了一个细枝模板文件：
public function indexAction()
{
return $this->render("WebsHomeBundle:Home:index.html.twig");
}
所以这很简单。现在我想做的是在这个Twig模板中包含一些CSS和JS文件。模板如下所示：
<!DOCTYPE html>
<html
浏览 42提问于2012-08-29得票数 67
回答已采纳
我正在使用Yeoman堆栈引导应用程序，并有一个关于如何处理CSS文件的问题。(我已将一个样本上传到Github：上)
基本问题是:如何处理不同的CSS文件？
在开发期间(运行grunt serve时)
当打包应用程序时(当运行grunt build)。
我已经安装了一些库，通过保龄球，随CSS文件。
例如，jQueryDataTables库具有以下CSS
bower_components/datatables/media/css/jquery.dataTables.css
现在，我的理解是，我永远不应该在我的jquery.dataTables.css中直接引用这个index.
浏览 0提问于2014-02-21得票数 0
如何使用缓存我的main.css和main.js文件的htacess。但是，我使用了多个js文件和css文件，如下所示
css -- main.css dafault.css new.css
js - main.js acc.jss new.js
我想要做的是防止只缓存main.css和main.js，我该如何做，但其余的css文件以及js文件都应该缓存
浏览 2提问于2012-05-21得票数 0
2回答
我正在使用开发一个应用程序。我试图做一个静态演示，但有些资源是找不到的。
npm run build.dev在项目目录中创建以下文件：
project |-- dev |-- app |-- app files... |-- css |-- main.css |-- other css files... |-- index.html |-- tsconfig.json
index.html
<!DOCTYPE html>
<html lang="en">
<head&g
浏览 3提问于2016-09-27得票数 2
2回答
好的，那么我如何使用loadCSS ()来允许浏览器异步加载CSS和JavaScript呢？
我的头标签里有这个：
<link rel="preload" href="http://zoidstudios.com/assets/css/main.css" as="style" onload="this.rel='stylesheet">
<noscript><link rel="stylesheet" href="http://zoidstudios.com/asset
浏览 1提问于2016-08-02得票数 3
如何让postcss-nesting和使用PWA插件构建的@vue/cli v3项目正常工作呢？
到目前为止我已经试过了
npm install postcss-nesting
然后，我创建了一个包含以下内容的src/main.css
body {
h1 {
color: green;
}
}
在main.js文件中，我导入了css import './main.css';
然后在postcss.config.js中，我将其添加到插件中(与其他插件一起工作)，例如
module.exports = {
plugins: {
'
浏览 0提问于2018-12-16得票数 1
3回答
我正在尝试将PHP文件包含在另一个目录中。
下面是我的文件结构
settings\
manage.php
website \
index.php
main.js
main.css
对于manage.php
echo 'Welcome to the manager! Here is your website:';
include('../website/index.php');
index.php
<script src='main.js'></script>
<link rel=
浏览 0提问于2013-05-30得票数 1
回答已采纳
3回答
我使用的是带有CleanWebpackPlugin的Webpack，但我使用的是index.php。所以HtmlWebpackPlugin不是一种选择。我发现了一个不同的插件，叫做WebpackManifestPlugin。这将创建一个包含这些文件及其散列的名为manifest.json的文件。它看起来是这样的： { "main.js": "css.d915ef.js", "main.css": "main.d915ef.css" } 但是我该如何在我的头脑中使用它呢？ <link rel="stylesh
浏览 67提问于2019-09-06得票数 4
1回答
我有一个主文件夹，它运行的是gulp服务器，它包含有单独文件的项目。我想让吞咽手表子文件夹和编译scss文件为其他项目，不只是目前运行。我为子文件夹添加了"watch“，当我在子文件夹中更改scss时，它会写为"injected: main.css"，但不会更改"main.css”。
我的文件夹的结构：
BASE/scss
/projects/project1/scss
/project2/scss
/projects3/scss
我希望基本上能够运行的基本文件夹，并观察和编译所有的.scss文件分别在
浏览 2提问于2018-01-11得票数 1
3回答
我打开了一个角4项目，我买了html & js模板，我想让它一起工作，所以在我编写的样式下，将其转换成角-cli.json。
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
"./assets/sass/material-dashboard.scss",
浏览 0提问于2017-11-06得票数 1
回答已采纳
我正在使用尾风CSS3.0，并根据文档对其进行了配置。
我的main.css文件如下所示：
@import "tailwindcss/base";
@import "./custom-base-styles.css";
@import "tailwindcss/components";
@import "./custom-components.css";
@import "tailwindcss/utilities";
我的postcss.config.js看起来是这样的：
module.exports = {
浏览 15提问于2021-12-16得票数 4
回答已采纳
我有三个分开的项目：
基座
实用程序
main
我想要实现的是webpack应该将这三个项目捆绑在一个index.html文件中，其中包含main.js、util.js、base.js、main.css、……。等。
每个项目都可以包含自己的node_modules文件夹，主项目应该依赖于base和util。
我将如何设置这个环境？
我应该使用多编译器模式吗？但是我如何利用它创建一个index.html呢？
浏览 1提问于2017-05-22得票数 2
回答已采纳
我试图添加一个互联网浏览器只名为ie.css的css文件。
我已经建立了一个简单的自定义joomla模板，它在每一个浏览器的工作都很好，except....usual罪魁祸首IE！
我已经将ie.css添加到css文件夹中，并且我很难让文件只从IE读取。这是我的.php文件：
<?php
$doc = JFactory::getDocument();
$doc->addStyleSheet('templates/' . $this->template . '/css/main.css');
$doc->addStyleShee
浏览 1提问于2014-11-22得票数 1
回答已采纳
1回答
我的CSS导入有问题-它是通过html链接标记生成的。<link rel="stylesheet" href="styles/main.css">
当url有一个类似斜杠的http://url/page时，它工作得很好。它在http://url/styles/main.css上正确地查找css。
但是，当URL包含两个斜杠(如http://url/page/1 )时，就会查看css：http://url/page/styles/main.css和so未找到，原因是路径不正确。
我使用的是clojurescript react js包装，称为重新框架。
浏览 4提问于2022-08-10得票数 0
1回答
我在这里使用本教程作为基础，但我没有任何示例说明如何将css文件导入应用程序。我已经找到了一些零碎的东西，但还不足以知道如何去做。我在App.jsx中添加了“导入样式”，我的webpack配置如下所示。
var css = require("css!./main.css");
var config = {
entry: './main.js',
output: {
path:'./',
filename: 'index.js',
},
devServer: {
浏览 2提问于2016-11-10得票数 1
1回答
我正在使用require.js进行一个项目，并计划使用r.js对其进行优化。javascript文件的优化是作为需求信任迁移的一部分自动内置的。
我想要的是将CSS分成几个不同的文件，例如head.css、body.css、main.css等等。当r.js运行时，它应该将这些文件连接到一个文件中。HTML将有：
<link rel=stylesheet type=text/css href=css/main.css>
一个问题是，在开发过程中，文件仍然会被分割。我想让它们分开，并且不想每次都要重新进行优化--即使它可以自动完成。
即使在开发中，我也希望能够保留只有一个样式表引用的H
浏览 2提问于2013-11-08得票数 1
我在这里找到了如何在Twig模板上引用资产文件：
它告诉我应该在路径中包含包文件夹，如下所示：{{ asset('bundles/mybundle/css/main.css') }}
这个解决方案对我来说并不可靠，因为我有许多带有大量资产文件引用(JS，CSS，Images)的网站模板，我需要将其转换为Twig模板，而且我很难像我在示例中提到的那样，用完整路径替换所有资产路径。至少，如果我可以像这样使用它，它会更容易：{{ asset('css/main.css') }}
有人能在这个问题上帮我吗？感谢每一个人。
浏览 7提问于2013-06-22得票数 0
我在CherryPy上有一个web应用程序。我正在尝试配置一个css文件在所有应用程序上使用，但我不能。这是我的conf文件：
[global]
server.socket_host = "127.0.0.1"
server.socket_port = 8090
server.thread_pool = 10
server.logToScreen = 0
[/main.css]
tools.staticfile.on = True
tools.staticfile.filename = "E:\apyb\main.css"
如果我在代码上设置配置，而不是在文件
浏览 1提问于2010-11-11得票数 2
回答已采纳
我正在尝试查找最近修改过的文件
find . -mtime 0
这给了我
en/content/file.xml
es/file.php
en/file.php.swp
css/main.css
js/main.js
但我想过滤掉en和es目录，但想获取其他任何内容。此外，我想从这些结果中过滤出.swp文件。
所以我想回到：
css/main.css
js/main.js
xml/foo.xml
除了不在es/en中且不以.swp结尾的所有其他文件之外
浏览 2提问于2010-08-04得票数 4
回答已采纳
3回答
实际上，我需要将另一个HTML文件导入到HTML文件中。我尝试了三种不同的设置，链接在下面，但没有一个正确显示。如果能帮忙解决这个问题，我将不胜感激。对于那些想知道我为什么要这样做的人，HTML和其他链接文件是使用一个程序创建的，该程序经常上传和写入旧文件，我希望这样做，这样我就可以更改字体，而不必每次上传新副本时都要重做。
以下是这些链接:jaredcaputo.photo/1/index2.html，jaredcaputo.photo/1/index22.html，jaredcaputo.photo/1/index222.html
指数2：
<html>
<h
浏览 2提问于2016-04-30得票数 0
回答已采纳
TLDR；
我需要在Laravel中同步执行一项任务。它需要在编译完我所有的CSS文件之后运行。我怎样才能做到这一点？
背景信息
在order.less中，导入main.less是必要的，因为在它中有许多依赖于较少定义(CSS选择器)的东西。
order.less中经常使用的一种技术是使用混合语法重用现有样式(在main.less中定义)，例如：.section-title();、.btn();等。
您应该知道，main.less和order.less是相对较大的文件，包含许多@import规则，包括其他文件。这是个大项目。
我之所以选择在以后(通过使用npm包postcss-discard)
浏览 10提问于2022-01-03得票数 0
在Liferay 6.2中，有没有办法加载文件夹中包含的所有css (或js)文件？
这是liferay portlet.xml示例文件：
<portlet>
<portlet-name>Example</portlet-name>
<icon>/icon.png</icon>
<instanceable>true</instanceable>
<header-portlet-css>/css/main.css</header-portlet-css>
浏览 5提问于2016-04-11得票数 0
我见过许多人在他们的main.js文件中导入他们的main.css文件，但我觉得这是不对的。为什么我要让我的JavaScript知道或关心CSS？将其包含在webpack配置条目中有什么错呢？
如下所示：
module.exports = {
...
entry: {
main: ['src/main.js', 'src/main.css']
},
...
};
浏览 0提问于2018-08-22得票数 2
第一次使用Bluehost。我想知道为什么我的CSS和JS不能正确呈现。 这是我的public_html文件夹的样子： ? My assets文件夹包含CSS和JS文件夹。 我不认为我在CSS的index.html文件中包含的链接是错误的： <link rel="stylesheet" type="text/css" href="assets/css/main.css"> 有没有我可能遗漏的步骤？如何使用CSS和JS正确加载我的页面？
浏览 30提问于2020-04-26得票数 0
7回答
基本上，我的页面中有两个外部css。
第一个Main.css包含所有样式规则，但我没有访问它的权限，因此不能修改它。我可以访问第二个文件Template.css，因此我需要在template.css中覆盖Main.css的值。
这很简单，我必须改变值，但是我如何完全删除属性呢？
例如，假设某个类的.c1具有height: 40px;，我如何摆脱这个height属性？
浏览 4提问于2011-03-07得票数 123
回答已采纳
我想知道是否可以使用gulp-connect来提供来自不同目录的一些文件。类似于：
http://localhost:8080/index.html => root: '/root/app'
但
http://localhost:8008/js/main.js => from '/root/js/' not from 'root/app/js'
http://localhost:8008/css/main.css => from '/root/css/' not from 'root/app/css/&
浏览 17提问于2016-09-17得票数 0
回答已采纳
我对Apache和LessCSS完全陌生。因此，我尝试包括中描述的较少的编译器插件。到目前为止还没有问题，所有文件都编译好了，并且css文件是在/target/[project name]/css文件夹中创建的。
而不是试图包含创建的*.css文件，但我不知道应该设置哪条路径。Maven把构建的文件放在哪里？
生成后，/target/[project name]/文件夹只包含新的css文件夹。但是我可以在本地主机上访问我的应用程序，除了缺少的css之外，没有任何错误。
CSS包括：
<link rel="stylesheet" href="css/main.css
浏览 0提问于2014-01-14得票数 1
1回答
我使用express来提供一个react应用程序(用Create引导)。该项目具有以下文件结构：
|--client/
| |--build/
| | |--static/
| | | |--main.css
| | | |--main.js
| | |
| | |--index.html
| |
| |--public/
| |--src/
|
|--server/
|--index.js
build文件夹包含所有静态文件，我想从一个非根url中提供它们。快件服务器配置如下：
app.u
浏览 2提问于2017-03-09得票数 1
我正在使用作为JS库的基础来编写JS库
"version": "1.29.0"
它有main.js文件和main.css文件，没有html文件。main.js文件都是关于DOM操作的，main.css文件在实现步骤中是必要的，可以方便地集成这个JS库，而不是给用户提供指导。
我觉得这是.css文件，因为这个JS库本身没有使用css，所以没有因为树的抖动而创建。
电流分布
-dist
--my-faceapi-js-lib.cjs.js
--my-faceapi-js-lib.esm.js
--my-faceapi-js-lib.umd.js
预期分布
-dist
浏览 2提问于2020-08-16得票数 2
1回答
使用新的zurb地基6
、、、、
我正试图将zurb-foundation 6纳入一个由yeoman生成的运行中的项目中。使用bower install foundation-sites --save添加以下文件：
在app/index.html上，<script src="bower_components/what-input/what-input.js"></script>和
应用程序/样式/main.scss @import "foundation-sites/scss/foundation.scss";上
生成的main.css并不包含的所有代码。
浏览 1提问于2015-11-26得票数 2
回答已采纳
我有一个Node/Express应用程序，带有一个Jade模板，可以导入一些静态文件。我的玉模板的突出线条如下所示：
layout.jade：
head
link(rel="stylesheet" href="/css/main.css)
script(src="/vendor/jquery.js")
block body
h1 Hello world.
mypage.jade：
extend layout
block body append
p Here another line.
我正在表达我的观点如下：
app.get('
浏览 5提问于2014-02-06得票数 1
回答已采纳
我正在尝试缩小css/js文件，如果存在此文件的缩小的css/js副本，通过.htaccess在其名称中包含.min.。我使用了以下代码：
RewriteCond %{DOCUMENT_ROOT}/$1.min.$2 -f
RewriteRule ^([^.]+)\.(css|js)$ /$1.min.$2 [L,NC]
因此，当我转到/current/assets/css/main.css时，我看到的是/current/assets/css/main.min.css。如果我在url中添加一些GET parametr，有没有办法做到这一点？例如，/current/assets/css/main
浏览 15提问于2017-01-11得票数 0
回答已采纳
6回答
要处理我的静态文件(CSS，JS)，我必须编写绝对路径，比如/AppName/templates/style/main.css。有没有什么解决方案，我可以像style/main.css一样写相对路径
浏览 0提问于2011-01-22得票数 79
回答已采纳
下面是我的html代码的一小段
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="UTF-8">
<title>Learning D3</title>
<!DOCTYPE html>
<html lang = "en">
<head>
<meta ch
浏览 1提问于2016-07-15得票数 0
3回答
我想在yii2中创建一个带有css和js文件的自定义小部件。在'components‘文件夹中，我创建了一个'myWidget’文件夹，并在它里面：- myWidget.php，它扩展了yii\base\Widget。- myWidgetAsset.php，它扩展了yii\web\AssetBundle。-包含index.php文件的views文件夹。-包含main.css和main.js文件的assets文件夹。
以下是代码: myWidget.php
namespace app\components\myWidget;
use app\components\tablaFo
浏览 1提问于2015-11-20得票数 3
我看到很多人在学习或开发React时，总是让css文件直接指向react上的App.js或组件，就像这样：
require('./style/main.css');
或者这个
import styles from './style/main.css';
为什么我们必须这样做？为什么不链接到index.html的头上呢？
浏览 4提问于2017-06-25得票数 0
2回答
我使用以下文件夹结构：
css
|_ main.css
|
|_ less
|_ main.less
|_ sub.less
|
|_ shared
|_ variables.less
|_ header.less
|_ footer.less
我在我的gulpfile.js中使用以下内容
gulp.task('less', function() {
gulp.src(paths.less + 'main.less', {read: true})
.pipe(plugins.pl
浏览 3提问于2015-02-06得票数 3
1回答
我正在使用Grunt.js查看我的js和scss文件，它会在保存时将它们编译为main.js和main.css。这一切都运行得很好。
不过，令人恼火的是，要查看服务器上反映的更改，我需要手动转到本地目录上的main.js和main.css文件，右键单击并选择upload to ... my remote server。
这在我原本顺畅的工作流程中是一个相当丑陋的颠簸。
是否有可能通过PHP Storm或Grunt.js设置一个任务，以便在这些文件发生更改时自动上传这些文件？
浏览 0提问于2015-09-06得票数 0
我刚用创建了一个小小的网络应用程序。在Live编辑模式下，编译的css存储在我的.tmp文件夹中，不直接包含在我的html文件中，它使用特殊的url。
档案结构：
.tmp/
main.css
app/
index.html
styles/
main.scss
在我的index.html中：
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
这是y
浏览 3提问于2015-02-27得票数 1
如何将烦人的构建窗口移到页面底部?这是我的webpack文件的样子 const mix = require("laravel-mix");
mix.js("resources/js/app.js", "public/js")
.postCss("resources/css/main.css", "public/css", [
require("tailwindcss"),
require("autoprefixer&
浏览 14提问于2020-08-14得票数 1
1回答
我正在开发一个具有许多第三方javascript和css依赖项的web应用程序。自从我发现Node.js、bower和gulp之后，找到和安装这样的依赖关系就很容易了。然而，我一直在积极地追求将我所有的javascript连接到一个文件中的策略，对于我的所有样式表也是如此。在连接和缩小之后，我的web应用程序只依赖两个相当大的文件(main.js和main.css)。作为参考，我的main.js文件的大小为1.6MB，main.css文件的大小为261 my。从任何方面来说都不是很大，但远远大于任何一个单独的依赖项。这是最优的，还是这些文件不断增长的大小最终超过了通过减少请求而获得的优化？有没
浏览 5提问于2016-05-18得票数 7
回答已采纳
我有以下文件夹结构
website
\styles\
main.css
\directory\
page.php
\layout\
background.jpg
common_includes.php
index.php
main.css包含背景图像，如
#container {
background-image: url('../layout/background.jpg');
}
common_includes.php包含所有pages.E
浏览 3提问于2016-03-12得票数 1
我正在寻找一种自动将所有脚本放入HTML文件中的脚本标记的方法。
所以我想要这个
<script src="..."></script>
<script src="..."></script>
...
将是：
<script type="text/javascript">
...
all the JavaScript code from every Script file
...
</script>
这能用蚂蚁或蝙蝠什么的吗？
我也希望JavaScr
浏览 5提问于2015-02-01得票数 4
回答已采纳
所以今天我开始使用代码点火器，我遇到了一个问题。问题是我想要将css文件链接到我的默认视图。我的尝试是将我的css文件放在根根目录中。所以看起来就像这样
-Root
--application
--system
--styles
----main.css
--index.php
然后，在我看来，我把css文件链接起来，假装它在同一个文件夹中，如下所示：
<link href="styles/main.css" rel="stylesheet" type="text/css">
现在，当我像这样访问我的默认控制器：http://loca
浏览 6提问于2013-07-30得票数 0
回答已采纳
1回答
我想试一试小包装和捆绑。
我安装了带有npm的包，并尝试创建一个index.js、main.js和main.css进行测试。
main.css
.main
{
color: red;
}
main.js
import classes from './main.css';
export default () => {
console.log(classes);
};
index.js
import main from './main';
main();
在我的layout.cshtml文件中，我包含了index.js文件，但这正是我所坚持
浏览 2提问于2018-01-15得票数 2
2回答
动态链接css
、、
我的文件夹结构如下所示：
|--js
|-- main.js
|--css
|--main.css
|--Folder1
|-- c.html
|--Folder2
|-- d.html
|--a.html
|--b.html
所有html文件都将链接到main.js，我在js中有如下所示的东西来动态链接main.css，但这只适用于html a和b。对于html c和d，它希望css文件夹位于同一个文件夹中。
var theorigin = window.location.origin;
var thefile = window.location.pathname.split
浏览 14提问于2022-06-21得票数 -1
1回答
我无法在JSF中正确指定资源加载的顺序，特别是在使用primefaces时。我需要包含许多样式表，所有这些都应该在primefaces资源之后加载。
我有这个：
<h:outputStylesheet library="mw.static" name="css/prime.css"/>
<h:outputStylesheet library="mw.static" name="css/main.css"/>
HTML格式的结果如下：
<link href="/static/css/prime.
浏览 1提问于2014-04-04得票数 1
我正在使用springboot与胸腺网开发一个网站。当不使用uritemplating时，框架可以正确地加载引导css文件，但是当我更改为uritemplating时，引导css中断。
这工作得很完美
@GetMapping("/update_avatar")
public String update_avatar(){
return "update_avatar";
}
这会中断css的加载。
@GetMapping("/update_avatar/{userid}")
public String update_avatar(@Pat
浏览 0提问于2018-01-28得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
