我有一個作業設定sass，parcel bundler通過npm. 問題是 - 每次我添加Bootstrap時，無論是通過安裝npm還是自己下載包，我的開發服務器（由運行parcel）開始非常滯后。我所做的每一次更改大約需要 7 秒。用于構建服務器。
在Sass安裝指南中寫著npm安裝
運行速度有點慢
所以我嘗試Sass按照指南下載軟體包并將其添加到我的PATH中進行安裝，但這沒有幫助。我的問題是 - 有人可以確認它是否可以運行SCSS并且Bootstrap不使用擴展 - 因為目前這是我看到的唯一選擇。其他開發人員如何解決這個問題 - 或者我的設定有問題？
PS。嘗試使用BootstrapCDN 時 - 服務器停止回應我的scss檔案，它只回應html- 這也是我不理解的。
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="scss/main.scss">
<!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> -->
</head>
<body>
<h1>test</h1>
<h2>test 1,2</h2>
<!-- bootstrap CDN : -->
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script> -->
</body>
</html>
主檔案
@import "~bootstrap/scss/bootstrap";
body {
background-color: rgb(194, 147, 98);
}
包.json
{
"name": "48.-new-saas-setup",
"version": "1.0.0",
"description": "",
"source": "./src/index.html",
"scripts": {
"dev": "parcel",
"build": "parcel build"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@parcel/transformer-sass": "^2.4.1",
"parcel": "^2.4.1",
"sass": "^1.50.1"
},
"dependencies": {
"bootstrap": "^5.1.3"
}
}
檔案夾結構：
3個第一臺服務器構建：
uj5u.com熱心網友回復：
感謝您提供詳細的復制 - 我能夠看到我的速度放緩（雖然它沒有那么劇烈，可能是因為我的電腦更快）。
這是您的應用程式的（簡化的）依賴關系圖：
index.html => scss/main.scss => node_modules/bootstrap/scss/bootstrap
看起來正在發生的事情是，無論何時main.scss發生變化，包裹都在重新處理node_modules/bootstrap/scss/bootstrap（這會匯入大量的東西，并且需要一段時間）。我懷疑這里有一個錯誤。
但是，您可以通過將依賴關系圖更改為以下方式來解決此問題并顯著加快速度：
index.html => main.scss
=> boostrap.scss => node_modules/bootstrap/scss/bootstrap
即，您將添加一個boostrap.scss檔案，其唯一作業是匯入引導程式 - 您在開發中幾乎不需要接觸它。
因此，您的 index.html 檔案將包含以下幾行：
<link rel="stylesheet" href="scss/bootstrap.scss" />
<link rel="stylesheet" href="scss/main.scss">
main.scss看起來像這樣：
// No bootstrap import here.
body {
background-color: rgb(220, 147, 20);
}
bootstrap.scss看起來像這樣：
@import "~bootstrap/scss/bootstrap";
// Nothing else here.
在我的測驗中，當您對main.scss.
~bootstrap/scss/bootstrap（我嘗試直接從匯入，但由于這個問題index.html，這不起作用）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/473123.html
上一篇：當頁面有滾動時，Bootstrap5工具提示放置頂部問題
下一篇：找出CSS媒體查詢的分頁寬度