自定义Bootstrap 5的步骤

qmelpv7a  于 11个月前  发布在  Bootstrap
关注(0)|答案(1)|浏览(121)

关于这一点的信息似乎很少(与Bootstrap 3相比,这是微不足道的定制)。
我不使用Node,所以我下载了dart-sass(CLI包只是几个文件-非常整洁),并设法用非常有限的Google搜索编译了5.2发行版。然而,预处理器输出的css文件不太正确-它非常接近,但与dist/css/bootstap.css下载的有许多不同之处。
如果我也运行autoprefixer,这些差异大概会消失。我猜这必须在dart-sass之后运行。有一个CLI版本(postcss-sass),但这是一个Node应用程序。
那么,如果我必须安装(并学习)Node,那么“最好”的答案就是复制Bootstrap构建过程吗?这也可以避免.browserslistrc文件的任何复杂性,这似乎在Bootstrap网站上没有解释。

uqjltbpv

uqjltbpv1#

如果你只是想生成自定义的css文件,那么没有必要复制整个构建过程。关于这一点的文档很少,但下面的过程确实创建了一个新的css文件,它与Bootstrap发行版中的版本相同(至少对于v5.3.2)。
autoprefixer是一个Node.js应用程序,所以没有办法安装Node。考虑到这一点,使用独立的dart-sass没有意义,你还不如使用Node版本。
Bootstrap至少需要Node.js 14(我认为),所以你首先必须得到它。(Ubuntu 22.04上的apt安装Node 12)。另一个复杂的问题是你需要npm,它必须与你的Node版本兼容。我会卸载你的发行版附带的任何东西,安装nvm后,安装最新的Node版本(20),

$ nvm install lts/iron

字符串
根据Bootstrap docs(没有 * 包管理器的版本)创建一个源代码树。下载当前的(5.3.2)zip文件,并解压缩到 Bootstrap 位置。这比npm安装(npm install [[email protected]](https://stackoverflow.com/cdn-cgi/l/email-protection))更好,因为它会给你一个.browserslistrc文件。
安装工具:

$ cd your-project
$ npm install postcss postcss-cli autoprefixer
$ npm install sass


节点可执行文件位于新的node_modules/.bin目录中,因此必须将其添加到PATH中。
在构建目录(your-project/scss)中,您需要:
1.来自Bootstrap发行版的.browserslistrc文件
1.另一个名为postcss.config.js的文件,其中包含:
module.exports = { plugins: [ require('autoprefixer')({ cascade: false }) ]}
1.一个custom.scss文件:从示例完整构建1开始,这样您就可以检查您的构建
现在你可以走了:

$ cd scss
$ sass custom.scss custom.css
$ postcss custom.css -d build/


新的custom.css构建在新的build目录中。将其与Bootstrap下载中的发行版(bootstrap-5.3.2/dist/css/bootstrap.css)进行比较;这两个文件应该是相同的,除了文件名中的一个差异。
请注意,这两个文件在其他版本(可能是5.2.3)上并不完全相同;我不知道为什么。

相关问题