導入引導SCSS成Django項目

我的問題涉及latest Bootstrap 4.x release (beta)導入引導SCSS成Django項目

我通過

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

導入來自CDN的CSS做我認爲正確的，在我的自定義SCSS，我無法訪問Bootstrap的變量（因爲它是一個編譯的CSS，而不是SCSS）？我試圖更改$spacer: 1rem !default;，但沒有奏效。

來源

2017-08-18 Fanny

請在將來每個主題只問一個問題 – Luuklag

CSS沒有變量，它們存在於SCSS中。這些變量在編譯期間會被它們的值替換。所以是的，您需要下載Bootstrap的SCSS源文件並將它們與您自己的SCSS文件一起編譯。

實現它的常用方法是使用webpack - 無論您的後端技術如何。它是一個基於node.js的工具（所以你也必須安裝它），它允許你管理你的靜態資產，包括安裝JS和CSS庫; ES6到ES5，LESS和SCSS到CSS編譯;捆綁;縮小等。

每個活動通常需要一個插件。實際上，第一次讓webpack按照需要工作實際上是相當困難的，但它是一種常用的web開發工具，值得借鑑。您可以配置webpack以下載並編譯引導程序。

來源

2017-08-18 08:33:18 Vovanrock2002

謝謝您的回答。我目前通過[django-compressor]解決編譯問題（https://github.com/django-compressor/django-compressor） – Fanny

問題1

你的假設是正確的，因爲SCSS是由瀏覽器渲染之前編譯成CSS。您應該記住，SCSS（或SASS）是一個CSS預處理器，不能直接通過瀏覽器呈現。爲此，我們有單獨的編譯器來將SCSS轉換爲CSS。
問題2

您可以從Git的這個克隆SCSS文件複製到你的靜態文件夾，然後你需要通過前端的自動化工具，如將其編譯成CSS：
- NPM
- 咕嚕
- 咕嘟咕嘟
- 的WebPack

來源

2017-08-18 08:33:48

那麼，一旦我導航到文件夾中，git克隆的路要走嗎？我認爲將有一種gemfile或任何其他腳本在根文件夾中執行，可以這樣做。 – Fanny

導入引導SCSS成Django項目

回答

相關問題