把vscode前端项目放到SpringBoot时所遇到的CSS路径问题

最新推荐文章于 2024-04-21 02:44:43 发布
最新推荐文章于 2024-04-21 02:44:43 发布
阅读量321 收藏
点赞数
分类专栏： SpringBoot 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41911599/article/details/116939863
版权

问题描述

今天把VSCode的前端页面资源放到SpringBoot项目中时，遇到了CSS不生效。。。。。。。

问题分析

因为我SpringBoot项目中用到Thymeleaf模板引擎，所以CSS的路径就不生效。SpringBoot运行时，找不到静态资源的路径！！！！！！！！！

问题解决

以下是解决方法！！！！
在springboot中引入thymeleaf
所有URL改成@{/ }并添加 th：，此处 / 代表static根目录
解决方法

骑着鱼过海的猫
关注
专栏目录
如何在vscode中配置less，并自定义css文件输出目录(超全面超详细)
m0_65450343的博客
05-02 5772
1，安装easy less扩展。 在vscode中安装easy less 2、安装后–>点击“管理”–>“扩展设置”，点击easy less扩展右下角小齿轮（设置） 3、选择“在setting.json中编辑” 4、拉到底加入以下代码，生成css文件的目录根据需要更改，这里以css目录举例 /**<<<<下面是less配置**/ "less.compile": { "compress": true, // 是否删除多余空白.
springboot+vue练手级项目，真实的在线博客系统
m0_67403240的博客
07-29 1万+
1=1=null">=null">
超详细的VsCode创建SpringBoot项目(图文并茂)
m0_67390788的博客
08-31 1万+
然后把maven的可执行文件路径配置、maven的setting路径配置、java.home的路径配置，拷贝到右侧的用户设置区域并且设置为自己电脑的实际路径。这个插件报出来的，其原因是这个插件鼓励开发者们使用Java 11或者更新的版本。使用快捷键(Ctrl+Shift+P)命令窗口，输入 Spring 选择创建 Maven 项目。如果项目有 get(), set() 报错，安装一下lombok插件，重启vscode。打开设置，搜索maven，编辑 settings.json。...
springboot的使用html页面及css、js路径的配置
wejack的专栏
05-12 1万+
1. springboot集成 html页面 在pom.xml文件中增加thymeleaf的starter引用 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> springboot项目，在application.y
VsCode搭建Spring Boot项目并进行创建、运行、调试
08-19
主要介绍了VsCode搭建Spring Boot项目并进行创建、运行、调试 ，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一步步使用SpringBoot结合Vue实现登录和用户管理功能
最新发布
2301_78145364的博客
04-21 996
按照官方文档，来进行MP的分页。作为Mybatis的增强工具，MP自然是支持自定义sql的。其实在MP中，单表操作基本上是不用自己写sql。这里只是为了演示MP的自定义sql，毕竟在实际应用中，批量操作、多表操作还是更适合自定义sql实现。修改pom.xml，在 中添加：**/*.xmltrue配置文件：在application.properties中添加mapper扫描路径及实体类别名包今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！
vscode 所有的默认配置项
热门推荐
沧笙踏歌的博客
05-22 7万+
快速打开 使用快捷键 Ctrl+Shift+P ，然后搜索setting 首选项：打开默认设置（json）,这个打开的是defaultSettings.json文件 可以在你的默认配置中看到这些，然后自己配置的时候，不懂的地方，可以参考这里 { // 控制在差异编辑器中是否把前导空格或尾随空格的改动显示为差异。 "diffEditor.ignoreTrimWhitespace": tru...
vscode liveserver 无法加载js 和css_优秀的 VS Code 前端开发扩展
weixin_39631007的博客
11-23 1342
原文作者：Ankur Biswas翻译：weakish@LeanCloud我留意到，网上有不少关于 VS Code 的文章，然而这些文章提到的扩展大部分都让我失望。所以我决定编写我个人使用的插件列表。前端为主的开发者，想高效使用 Visual Studio Code，我觉得这个列表会很有帮助。其中一些插件你大概已经装了 - 因为它们是被推荐最多的扩展 - 但还有一些你也许没装。方便阅读...
不可错过的VScode插件（一）
王龙鑫的博客
08-02 1589
Material Theme 经典的主题 Visual Studio Code 最悠久的主题！ Brackets Light Pro 一款经典的浅色皮肤 Beautify HTML,CSS,SCSS,JS格式化 Open-In-Browser 右键或者alt + b 在浏览器中预览文件 IntelliSense for CSS class names in HTML...
springboot访问html和引用js/css的配置
Boxbiu的博客
10-27 956
在pom中添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> 在ap...
Springboot前端thymeleaf html页面js,css相对路径引用问题解决
qq_29964641的博客
08-30 3552
Springboot前端thymeleaf html页面js,css相对路径引用问题解决 怕你们没心思全部看完,直接把解决方案放在最开头吧! 第一种方案: <!-- 第一种方式:<base> 标签为页面上的所有链接规定默认地址或默认目标,然后你的css或js或src原来是怎么样还是什么样 --> <base th:href="@{/}"> ...
VS Code运行SpringBoot项目
陈灬大灬海
05-20 1万+
介绍 Visual Studio Code 下载地址 https://code.visualstudio.com/ 前端开发工具，相比webstorm而言，要轻量不少，主要是还轻量免费 运行springboot缘由 后端开发用的SpringBoot，但却是一个前后端部不分离的项目 后端用的IntelliJ IDEA。由于前端小伙也需要在这工具上进行开发，最后在他电脑上也安装了jdk，id......
VSCode插件开发 浅谈workspace问题
forward_huan的博客
09-02 5727
判断当前是否存在workspace 打开Settings, 有时可以看到这里有一个Workspace, 中文环境下叫做工作区。 什么时候会出现这个Workspace选项呢？ 如果现在没有Workspace显示，执行以下操作会出现Workspace选项 File -> Open Folder...,当有文件夹打开的时候 File -> Open Workspace..., 当打开一个Workspace的时候 File -> Add Folder to Workspace..., 当添加文
vscode怎么写css支持scss,CSS, SCSS, and Less support in Visual Studio Code
weixin_35875219的博客
08-04 713
CSS, SCSS and LessVisual Studio Code has built-in support for editing style sheets in CSS .css, SCSS .scss and Less .less. In addition, you can install an extension for greater functionality.Tip: Clic...
Vscode的相对路径读取问题及处理
sumaliqinghua的博客
05-21 4万+
Vscode的相对路径读取问题及处理 差异 首先说一下vscode相对路径与一般编辑器的不同 符号 vscode 一般的 “./2.txt” 相对于工作路径（.vscode文件夹所在的位置） 相对于当前运行文件 “2.txt” 相对于工作路径 相对于当前运行文件 “/2.txt” 相对于磁盘根目录 相对于磁盘根目录 问题处理 案例：工作路径如下，执行文件为 readfi...
2022前端入门：HTML+CSS基础与VScode实践
前端开发基础：HTML+CSS是学习Web开发入门的重要组成部分，它涵盖了构建网页的基本架构和样式设计。本文档是2022年4月6日的一份自学...随着学习的深入，JavaScript和其他相关技术也会逐步加入到前端开发的技能树中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值