【问题标题】:Using WinLess with Bootstrap 3.3.7在 Bootstrap 3.3.7 中使用 WinLess
【发布时间】:2017-06-27 07:05:30
【问题描述】:

过去,我使用 Bootstrap 及其 Less 文件和 WinLess 程序来编译成 CSS 文件(这是在我的 Windows 7 PC 上)。我对 Less 没有什么特别的想法,只是更改 Bootstrap 的 variables.less 中的一些值(主要是颜色)并将我自己的样式包含在 custom.less 文件中。

我已经有 2 年没有使用 Bootstrap 了,但现在必须开始一个新项目,我想我会使用最新版本的 Bootstrap,V3.3.7。当我在 Bootstrap Getting Started 页面上注意到使用 Less/Sass 时需要 Autoprefixer 时,我下载了源文件并开始设置所有内容。具体来说:

Bootstrap 使用 Autoprefixer 来处理 CSS 供应商前缀。如果 您正在从其 Less/Sass 源代码编译 Bootstrap,而不是使用我们的 Gruntfile,您需要将 Autoprefixer 集成到您的构建中 自己处理。如果您使用预编译的 Bootstrap 或使用我们的 Gruntfile,你不需要担心这个,因为 Autoprefixer 是 已经集成到我们的 Gruntfile 中。

我确定当我使用旧版本的 Bootstrap 执行此操作时,没有此 Autoprefixer 要求。

我没有使用 Grunt(我对 Grunt 一无所知,也不知道它是否可以在我的 Windows 7 PC 上运行)。我找不到任何关于 WinLess 与 Autoprefixer 一起使用的提及,所以我认为它没有。如果我使用 WinLess 将 Less 代码编译成 CSS,它会起作用,但我不会添加供应商前缀吗?这会给我带来麻烦吗?是否有人在 Bootstrap 3.3.7 中使用 WinLess,如果有,您是如何绕过这个要求的?

如果我不能让 Less 工作,那么自定义 Bootstrap 颜色并包含我自己的 CSS 的好方法是什么?也许我可以使用预先构建的 bootstrap.min.css 并将我自己的所有 CSS 放入 custom.css 文件中?这适用于添加我自己的样式,但如果我想更改 Bootstraps 按钮或其他项目的颜色怎么办?

【问题讨论】:

  • “如果我不能让 Less 工作,那么自定义 Bootstrap 颜色并包含我自己的 CSS 的好方法是什么?” - 答案在问题中:“使用 Grunt”(getbootstrap.com/getting-started/#grunt)。
  • 回答您的主要问题:“这会给我带来麻烦吗?” - 是的,如果没有 Autoprefixer,您编译的 CSS 将无法正常工作。

标签: css twitter-bootstrap-3 less


【解决方案1】:

由于这是一个小型一次性项目,因此尝试让 WinLess 工作或努力设置 Grunt 等可能不值得。最好只使用Bootstrap's Customize 功能来选择要包含的组件和颜色使用;这将创建一个自定义的 bootstrap.min.css 和 bootstrap.min.js 文件,以及一个 config.json 文件,如果需要,该文件可用于重新自定义,而无需从头开始。

然后将我自己的所有自定义 CSS 放入 custom.css 文件中。

【讨论】:

    猜你喜欢
    • 2017-02-04
    • 1970-01-01
    • 2018-07-23
    • 2019-06-17
    • 2018-09-14
    • 1970-01-01
    • 2018-11-11
    • 1970-01-01
    • 2018-11-04
    相关资源
    最近更新 更多