SpringBoot --thymeleaf引入css无效问题

首先导入依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

再更改下thymeleaf的版本

<properties>
    <java.version>1.8</java.version>
    <thymeleaf-spring5.version>3.0.9.RELEASE</thymeleaf-spring5.version>
    <thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-dialect.version>
</properties>

声明一个配置类

@Configuration
public class MyConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("index");
        registry.addViewController("/index.html").setViewName("index");
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
                 //registry.addResourceHandler("/static/").addResourceLocations("classpath:/static/");
                 registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
             }
}

注意这里不能加@EnableWebMvc注解

再在yaml文件里配置一下缓存


spring:
  thymeleaf:
    #缓冲的配置
    cache: false
    check-template: true
    check-template-location: true
    #开启MVC thymeleaf 视图解析
    enabled: true
    encoding: utf-8
    mode: HTML5
    prefix: classpath:/templates/
    suffix: .html

切记切记
以css文件为例是以,文件命名不能有多个.如下图是我之前的文件目录
在这里插入图片描述
把.default删掉再运行即可成功加载样式!

最终包目录如下:

在这里插入图片描述

### 回答1: 可能是以下原因导致Thymeleaf引入CSS无效: 1. CSS文件路径不正确:请确保CSS文件路径正确,可以使用相对路径或绝对路径。 2. Thymeleaf模板中的语法错误:请检查Thymeleaf模板中的语法是否正确,特别是在引入CSS时使用的语法。 3. 缓存问题:如果您已经更改了CSS文件,但在浏览器中看不到更改,请尝试清除浏览器缓存。 4. 服务器配置问题:请确保服务器配置正确,例如,服务器是否正确地处理静态资源。 希望这些提示能帮助您解决Thymeleaf引入CSS无效问题。 ### 回答2: 使用Thymeleaf引入CSS文件无效的原因可能有很多,以下是一些可能的解决方案。 1. 检查文件路径是否正确 在引入CSS文件时,可能需要通过相对路径或绝对路径来指定文件位置。如果路径错误,CSS文件将无法正确加载。确保路径指向正确的文件位置。 2. 确保CSS文件已上传到服务器 如果CSS文件没有上传到服务器,或上传的位置错误,那么引入CSS文件的标签将指向不存在的资源,导致CSS无法加载。 3. 检查CSS文件名是否正确 如果CSS文件名错误或拼写错误,那么引入CSS文件的标签将找不到对应的文件,导致无法加载CSS。 4. 查看浏览器开发工具 在浏览器开发工具中查看网络面板,确保CSS文件已经正确加载。如果没有加载,可能是网络问题或者服务器配置问题。 5. 确保Thymeleaf标签正确使用 Thymeleaf标签的使用可能会有一些细微的差别,比如属性名大小写、标签的闭合等等。确保Thymeleaf标签按照正确的方式使用。 6. 确保CSS文件没有被缓存 如果之前加载过CSS文件,那么浏览器可能已经缓存了文件,导致新的CSS文件无法正确加载。可以强制刷新浏览器或清除浏览器缓存来解决。 总之,使用Thymeleaf引入CSS无效的原因可能有很多,需要通过排查一步一步找到问题所在,一旦找到问题,就可以有效解决。 ### 回答3: 在使用thymeleaf引入css无效,通常有以下几个原因: 1. 检查文件路径是否正确 在引入css时,需要保证文件路径是正确的,否则会导致引入失败。请检查文件的相对路径或绝对路径是否正确。 2. 检查是否被拦截 在一些安全框架下,可能会拦截一些css文件的请求。请检查是否被拦截,如果是,则需要将相应的请求添加到不受拦截的列表中。 3. 检查css文件是否存在 如果引入css文件不存在,也会导致引入失败。请检查文件是否存在,路径是否正确。 4. 检查thymeleaf配置是否正确 在使用thymeleaf引入css时,需要确保配置是正确的。请检查thymeleaf相关的配置文件是否正确。 5. 检查是否有其他错误 如果以上都没有问题,可能是其他错误导致的。请检查浏览器控制台是否有相关错误信息,如404等。根据错误信息来排查问题。 总之,在使用thymeleaf引入css时,需要保证文件路径正确、文件存在、thymeleaf配置正确,并注意其他可能的错误。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值