为什么这一个页面无法加载其css？

Question

我想不通为什么这一个页面不能正常加载。我网站的其他页面都很好。我试过在所有文件中添加一个链接到css，但这并不能解决这个问题。我也试过把过滤器文件和主文件合并，但也没有用。了解我的人都知道，我只是缺少一些基本的东西。styles.css文件没有被正确访问，错误代码是404。(这是我的第一个网站)

路由器。

router.get('/flags/:filter', viewController.getFilteredFlagOverview);

出口：

exports.getFilteredFlagOverview = async (req, res) => {
  const params = req.params.filter;
  const flags = await axios({
    method: 'GET',
    url: `http://127.0.0.1:3000/api/v1/flags?${params}`
  });
  var filteredObj = flags.data.data.doc;

  res.status(200).render('flagOverview', {
    title: 'Flags',
    products: filteredObj
  });
};

基础ug。

doctype html
html
  head
    meta(charset='UTF-8')
    mets(name='viewpoint' content='width=device-width, initial-scale=1.0')
    title Color Guard | #{title}
    link(rel='stylesheet' href='css/style.css')
    link(rel='shortcut icon' type='image/png' href='img/favicon.png')
    link(rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300,300i,700')

产品 pug:

extends base

block content
  head
    include productFilters/_flagFilter
  style.
    .tab1 {
      tab-size: 2;
      }
  <script src="https://kit.fontawesome.com/a9879bc1c3.js" crossorigin="anonymous"></script>

  main.main
  // don't think past this is important

滤镜文件--我相信问题就出在这里。

filter.filter
  #mySidenav.sidenav
    a.closebtn(href='javascript:void(0)' onclick='closeNav()') ×
//

//
  br
    a.filterBtn(onclick='applyFilter()') Apply Filter
    br

  button.btn.btn--purple.btn--small(onclick='openNav()') Filter
  .dropdown
    button.btn.btn--purple.btn--small Sell Your Flags
      .dropdown-content
        a(href='/createFlagSilk') Flag Silk
        a(href='/createFlagPole') Flag Pole
        a(href='/createFlagStopper') Flag Stopper
        a(href='/createFlagBolt') Flag Bolt

  script(src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js')
  script(src='/js/index.js')
  script(type='text/javascript')
  script.
    function openNav() {
      document.getElementById("mySidenav").style.width = "275px";
    }

    function closeNav() {
      document.getElementById("mySidenav").style.width = "0";
    }

    async function applyFilter() {
      var params = '';
      var temp = document.getElementById('flag_category');
      var category = temp.options[temp.selectedIndex].value;
      temp = document.getElementById('flag_color');
      var color = temp.options[temp.selectedIndex].value;
      temp = document.getElementById('flag_theme');
      var theme = temp.options[temp.selectedIndex].value;
      temp = document.getElementById('flag_flagType');
      var flagType = temp.options[temp.selectedIndex].value;
      temp = document.getElementById('flag_fabricType');
      var fabricType = temp.options[temp.selectedIndex].value;

      if (color) params = params + `color=${color}`
      if (category && color) params = params + `&category=${category}`
      if (category && !color) params = params + `category=${category}`
      if (theme && (color || category)) params = params + `&theme=${theme}`
      if (theme && !color && !category) params = params + `theme=${theme}`
      if (flagType && (color || category || theme)) params = params + `&flagType=${flagType}`
      if (flagType && !color && !category && !theme) params = params + `flagType=${flagType}`
      if (fabricType && (color || category || theme || flagType)) params = params + `&fabricType=${fabricType}`
      if (fabricType && !color && !category && !theme && !flagType) params = params + `fabricType=${fabricType}`

      window.location.replace(`/flags/${params}`);
    };

我试着这样做，看看是否能成功 第一个 "render product "能成功，但第二个不能。

exports.getOverview = (req, res) => {
  res.status(200).render('product', {
    title: 'Product Selection'
  });
};

exports.getFilteredFlagOverview = async (req, res) => {
  /*
  const params = req.params.filter;
  const flags = await axios({
    method: 'GET',
    url: `http://127.0.0.1:3000/api/v1/flags?${params}`
  });
  var filteredObj = flags.data.data.doc;
  */
  res.status(200).render('product', {
    title: 'Flags'
  });
};

Answer 1

我只是不得不改变

link(rel='stylesheet' href='css/style.css')

与

link(rel='stylesheet' href='http://127.0.0.1:3000/css/style.css')

在基础帕格。