关于这一点的信息似乎很少(与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网站上没有解释。
1条答案
按热度按时间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),字符串
根据Bootstrap docs(没有 * 包管理器的版本)创建一个源代码树。下载当前的(5.3.2)zip文件,并解压缩到 Bootstrap 位置。这比npm安装(
npm install [[email protected]](https://stackoverflow.com/cdn-cgi/l/email-protection)
)更好,因为它会给你一个.browserslistrc
文件。安装工具:
型
节点可执行文件位于新的
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开始,这样您就可以检查您的构建现在你可以走了:
型
新的
custom.css
构建在新的build
目录中。将其与Bootstrap下载中的发行版(bootstrap-5.3.2/dist/css/bootstrap.css
)进行比较;这两个文件应该是相同的,除了文件名中的一个差异。请注意,这两个文件在其他版本(可能是5.2.3)上并不完全相同;我不知道为什么。