为什么这一页没有加载它的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
  });
};

基础哈巴狗：

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')

产品哈巴狗：

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}`);
    };

我尝试了这个，看看它是否可以工作，第一个“渲染产品”可以工作，但第二个不行。

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')

在基础哈巴狗中。