How can I customize Bootstrap with Sass if I use it via CDN?-CodePudding

The Bootstrap 5.3 doc on Sass customization explains how to override Bootstrap settings using the Sass custom.scss script. I understand that, when Bootstrap was downloaded either manually or via the package manager, the custom.scss script needs to refer to these downloaded files, with something like @import "../node_modules/bootstrap/scss/bootstrap";.

However, suppose I did not download Bootstrap, but instead I want to import Bootstrap via CDN, like so:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC nuZB EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
  </body>
</html>

Can I still use the same approach? If so, what path should I specify in the @import command?

CodePudding user response：

You can import external files to your custom.scss like this:

@import url(https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css);

But I would recommend downloading Bootstrap via package manager or manually instead.