admin管理员组

文章数量:1122846

I'm working on a project where I'm using Bootstrap 5 installed via npm and custom SCSS styles. My index.html works perfectly, applying all Bootstrap and custom styles (header, footer, etc.), but when I navigate to speakers.html, none of the styles are applied to the page.

File Structure

Here is the structure of my project:

/node_modules
  /bootstrap
    All of Bootstrap's files...
/src
  /assets
    /styles
      /layouts
        _footer.scss
        _header.scss
        _home.scss
        _speaker-card.scss
        _speakers.scss
      main.scss
      _variables.scss
    /views
      footer.html
      header.html
      speaker-card.html
      speakers.html
index.html

Relevant Files

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" type="text/css" href="./assets/styles/main.scss" />
    <title>Cyber Secure</title>
  </head>
  <body>
    <include src="./views/header.html"></include>
    <div class="container">
      <!-- Some content -->
    </div>
    <include src="./views/footer.html"></include>
    <script type="module" src="./assets/scripts/main.js"></script>
    <script src="/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

speakers.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" type="text/css" href="/src/assets/styles/main.scss" />
    <title>Cyber Secure</title>
  </head>
  <body>
    <include src="./views/header.html"></include>
    <div class="container">
      <!-- Some other content -->
    </div>
    <include src="./views/footer.html"></include>
    <script type="module" src="./../assets/scripts/main.js"></script>
    <script src="/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

main.scss

@import "variables";
@import "npm:@fortawesome/fontawesome-free/css/all.css";
@import "/node_modules/bootstrap/scss/bootstrap.scss";

@import "layouts/home";
@import "layouts/header";
@import "layouts/footer";
@import "layouts/speakers";
@import "layouts/speaker-card";

posthtml-include Configuration (in .posthtmlrc):

{
  "plugins": {
    "posthtml-include": {
      "root": "./src"
    }
  }
}

Dependencies:

"devDependencies": {
  "@parcel/transformer-sass": "^2.12.0",
  "autoprefixer": "^10.4.15",
  "parcel": "^2.12.0",
  "postcss-preset-env": "^9.1.1",
  "posthtml-include": "^1.7.4"
},
"dependencies": {
  "bootstrap": "^5.3.3",
  "@fortawesome/fontawesome-free": "^6.6.0"
}

Issue

  • In index.html, all styles (Bootstrap and custom SCSS) are working as expected. The header and footer are styled correctly.
  • In speakers.html, no styles are applied to the page, including Bootstrap styles. The card in the content doesn't have the expected Bootstrap styles, and the custom header and footer styles are also missing.

Expected Behavior

  • The speakers.html page should display with the Bootstrap and custom styles for the header and footer, just like in the index.html page.

What I've Tried

  1. Checked the file paths for the CSS link in speakers.html. It seems correct, but still no styles are being applied.
  2. Made sure Bootstrap is installed properly by checking its installation in node_modules.
  3. The SCSS files for the header and footer seem correct, and they are properly imported into main.scss.
  4. I am not overriding any Bootstrap classes in custom SCSS files.
  5. The posthtml-include configuration seems correct as well, as it works for index.html.

Questions:

  • Why does Bootstrap work fine in index.html but not in speakers.html?
  • Is there something in the way I have linked the SCSS or HTML files that causes styles to not apply on the speakers.html page?

Any help is appreciated!

本文标签：

版权声明：本文标题：sass - Bootstrap and custom styles are not applied to views, but work fine on `index.html` - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736303814a1932012.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。