在我的基于 Spring 启动的项目中不连接 css 文件

Question

Tell me why I can't connect the css files in my index.html.

I have tried various methods, but nothing has worked. In my project Spring Security...maybe it somehow affects.

My WebSecurityConfig class

@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
  // @Autowired
 //  UserService userService;

@Bean
public BCryptPasswordEncoder bCryptPasswordEncoder() {
    return new BCryptPasswordEncoder();
}

@Override
protected void configure(HttpSecurity httpSecurity) throws Exception {
    httpSecurity
            .csrf()
            .disable()
            .authorizeRequests()
            .antMatchers("/resources/**").permitAll()
            //Доступ только для не зарегистрированных пользователей
            .antMatchers("/","/index","/login","/registration").permitAll()
            //Доступ только для пользователей с ролью Администратор
            .antMatchers("/admin/**").hasRole("ADMIN")
            .antMatchers("/news").hasRole("USER")
            //Доступ разрешен всем пользователей
            .antMatchers("/", "/resources/**").permitAll()
            //Все остальные страницы требуют аутентификации
            .anyRequest().authenticated()
            .and()
            //Настройка для входа в систему
            .formLogin()
            .loginPage("/login")
            //Перенарпавление на главную страницу после успешного входа
            .defaultSuccessUrl("/")
            .permitAll()
            .and()
            .logout()
            .permitAll()
            .logoutSuccessUrl("/");
}

And this is how I connected in various ways in index.html

<link rel="stylesheet" type="text/css" href="../../resources/styles/bootstrap-4.1.2/bootstrap.min.css">
<link href="../../resources/plugins/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="../../resources/plugins/OwlCarousel2-2.3.4/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="../../resources/plugins/OwlCarousel2-2.3.4/owl.theme.default.css">
<link rel="stylesheet" type="text/css" href="../resources/plugins/OwlCarousel2-2.3.4/animate.css">
<link rel="stylesheet" type="text/css" th:href="@{../resources/styles/main_styles.css}">
<link rel="stylesheet" type="text/css" th:href="@{../resources/styles/responsive.css}">

I don't understand why it doesn't connect...

Answer 1

You shouldn't use resources in href, and by convention you put static files like css, js and such into resources/static/ and then use th:href="@{styles/main_styles.css}

also just to make sure it isn't spring security blocking it, I always added following in my security config:

 @Override
 public void configure(WebSecurity web) throws Exception {
        web.ignoring().antMatchers("/resources/**", "/static/**", "/css/**", "/js/**", "/images/**","/vendor/**","/fonts/**").anyRequest(); 
 }

ps: Btw I couldnt help but notice - dnt use package names in plural - convention is singular so not controllers but controller . You have to think that package name will be read as a whole line com.sportify.Sportify.controllers.HomeController which will be then used in import statements

For the same reason only class name starts with capital letter and you shouldn't repeat package names - so correct would be com.yoursuranme.sportify.controller package structure. But this is just to provide info for future reference.