sass - Primeflex 变量 $lg

Question

在 Primeflex 文档中，变量 $lg（笔记本显示器等屏幕的断点）的默认值为 992px。我该如何改变呢？例如，我想设置一个默认值 1100px。请协助我使用 Primeflex 3.0.1

Answer 1

这在https://www.primefaces.org/primeflex/setup中有解释

变量

SASS 变量可用于自定义和创建您自己的 primeflex 构建。首先克隆primeflex 存储库，然后在自定义后构建 primeflex.scss 文件。有关如何构建 scss 文件的更多信息，请参阅Sass文档。

该部分不太清楚的是在哪里可以找到变量。您需要修改此文件：

https://github.com/primefaces/primeflex/blob/master/_sass/lib/src/_variables.scss

Answer 2

这些步骤解决了我的问题，谢谢:)

1. 从https://github.com/primefaces/primeflex克隆项目
2. 更改路径 _sass/lib/src/_variables.scss 上的变量值
3. 使用命令 npm install -g sass 全局安装 sass
4. 打开项目
5. 运行 npm install 安装包
6. 运行 npm run build-lib 这将创建新的 dist 文件夹
7. 将 dist 文件夹复制到正在进行的项目中
8. 从 package.json 文件中删除 "primeflex": "3.0.1"
9. 在 angular.json 文件中添加使用导入的 primeflex.css 的路径（“styles”：[“/primeflex/primeflex.min.css”]）

Answer 3

您可能不想修改任何内容，因为如果它得到更新，您的修改将会消失。使用覆盖来完成此操作。将以下内容添加到您的 .scss

$lg:992px !important;