Question

我创建了2个文件夹：

bootstrap（最后一个版本，我保持不变）
自定义：
定制variables.less（空）
定制other.less（空）
custom-bootstrap.less（我把以下内容放在：

@import "../bootstrap/less/bootstrap.less"; @import "custom-variables.less"; @import "custom-other.less"; @import "../bootstrap/less/utilities.less";

然后我去bootswatch，选择主题Flatly并将变量的内容复制到我的custom-variables.less和bootswatch.less的内容到我的custom-other.less。

然后我做

lessc custom-bootstrap.less > custom-bootstrap.css

我应该如何修改index.html以使模板有效？

`<head>
<title>Bootswatch: Flatly</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="./bootstrap.css" media="screen">
<link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../assets/css/bootswatch.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="../bower_components/bootstrap/assets/js/html5shiv.js"></script>
  <script src="../bower_components/bootstrap/assets/js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">

 var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-23019901-1']);
  _gaq.push(['_setDomainName', "bootswatch.com"]);
    _gaq.push(['_setAllowLinker', true]);
  _gaq.push(['_trackPageview']);

 (function() {
   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();

</script>

`

（我一直试图以不同的方式插入我的“custom-bootstrap.css”，但在收听端口8080时，只显示纯文本）

我尝试了什么：

<link rel="stylesheet" href="./less/custom-bootstrap.css" media="screen">

<link rel="stylesheet" href="less/custom-bootstrap.css" media="screen">

<link rel="stylesheet" href="/less/custom-bootstrap.css" media="screen">

<link rel="stylesheet" href="/less/custom-bootstrap.css" media="screen" />

也

<link rel="stylesheet" href="${pageContext.request.contextPath}/css/custom-bootstrap.css">

也尝试了

在Chrome和Mozilla中，

也尝试了

直接在浏览器中访问css文件 - 没办法。

控制台说错误404，也找不到其他一些JS文件。

请帮助或投票）

Answer 1

你是否将node与node一起使用？如果你不这样做，请查看这篇文章： http://blog.modulus.io/nodejs-and-express-static-content

我认为应该有所帮助。

Answer 2

您的CSS参考应如下所示：

<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Answer 3

您应该包含自定义的bootstrap css文件而不是原始文件。如果你只使用bootswatch中的variables.less，那么你也不需要包含它。所以只需使用：

<link href="assets/css/custom-bootstrap.css" rel="stylesheet">

如果没有帮助，请提供我的文件以提供更多帮助。

PS：你让我在CodeProject的文章中看到这个问题。 ;）

浏览器无法访问CSS

3 个答案: