我最近开始使用 scss 文件,尤其是自定义 Bootstrap。
要编译我的 scss 文件(以及引导程序),我在命令行中使用 sass。
示例:
sass /path/to/scss/bootstrap/mycustom.scss /path/to/css/bootstrap.min.css -t compressed -C --sourcemap=none
mycustom.scss 是这样的:
$theme-colors: (
"custom-primary": "...",
"custom-secondary": "..."
);
....
....
@import "bootstrap";
这样我就可以根据自己的喜好自定义引导程序,没有任何问题。
然而今天,我意识到图形组件(自定义选择)未正确渲染。经过一番研究,我发现这是由于编译期间缺少 Autoprefixer 造成的,因此一些 css 属性没有添加到我的 bootstrap.min.css.
我在 Bootstrap 文档中找到了这个:https://getbootstrap.com/docs/4.2/getting-started/build-tools/#autoprefixer
但是我找不到使用 Autoprefixer 编译 Bootstrap (使用 sass)的解决方案。
这与我面临的问题完全相同。所以我在互联网上查了很多,找到了解决这个问题的一个可能的解决方案。您可以使用 NPM(节点包管理器)解决此问题。阅读此或此文章
您需要什么,
创建 package.json 文件或运行
npm init
按照文章中提到的方式创建命令
在您的案例中添加您的
devDependencies
node-sass autoprefixer onchange 和 postcss-cli
运行
npm install
,(安装完所有软件包后)
奔跑
npm start
这就是我的做法例如
package.json
{
"name": "web_name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"devDependencies": {
"autoprefixer": "^9.4.2",
"node-sass": "latest",
"onchange": "^5.2.0",
"postcss-cli": "latest"
},
"scripts": {
"build:sass": "node-sass --output-style=expanded --source-map=true assets/scss/style.scss assets/css/style.css",
"prefix": "npm run build:sass && postcss assets/css/style.css --use=autoprefixer --output=assets/css/style.css",
"start": "onchange \"assets/scss/**/*.scss\" -- npm run prefix"
},
"browserslist": [
"last 2 versions"
],
"repository": {
"type": "git",
"url": "Repo/Path"
},
"keywords": [
"SASS"
],
"author": "Ismail Farooq",
"license": "ISC",
"homepage": "Path",
"dependencies": {}
}
根结构
Sass 文件夹结构
在我全局安装后
post-css
和autoprefixer
npm install -g postcss-cli autoprefixer
我运行以下命令以使用 autoprefixer 重新加载我的 CSS 文件。
postcss assets/theme.css --replace --use autoprefixer
注意: 一旦我完成了一个同时处理 SASS CLI 和 Autoprefixer 的命令,我就会更新这篇文章
Edit-1: 您可以组合 2 个终端命令并编译和缩小 Bootstrap SCSS,然后运行 Autoprefixer 只需一个命令即可添加供应商前缀:
sass scss/theme.scss:assets/theme.min.css --style=compressed && postcss assets/theme.min.css --replace --use autoprefixer
我猜你正在使用 npm 将 scss 转换为 css。
只需要安装内置的 postcss 和 autoprefixer 插件。 然后,您需要在命令行中使用 postcss 来代替命令行中的 sass 来转换为 css。 请参考 https://www.npmjs.com/package/postcss#npm-run--cli
你不能让引导程序和你的自定义CSS保持不同吗?与传统上一样,我们尝试使用另一种外部样式来用自定义 css 覆盖 bootstrap ,类似地,如果您想学习 sass ,请尝试使用 sass 创建新的外部样式表,保持 bootstrap 代码不变,并通过仅包含在 bootstrap import 下面添加您的自定义样式main.scss 其中包含您的自定义样式
在撰写本文时,node-sass 正在过渡到弃用状态,建议改用 Dart Sass。
如果您通过 cli(或使用执行此操作的脚本)编译 sass,则可以使用
load-path
cli 选项。
$ sass --load-path=./node_modules/bootstrap/scss ./src/main/scss:./src/main/css
但是,如果您仍在使用node-sass,看起来node-sass有一个
includePaths
选项。当然,如果您以编程方式使用 node-sass,我相信它有 cli 选项 include-path
所以可能可以这样做:
$ node-sass --include-path=./node_modules/bootstrap/scss ./src/main/scss:./src/main/css
但是,如果可能的话,您最好使用 Dart Sass 代替 node-sass。