Question

这是一个实例：

HTML：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <html class="no-js"><!--<![endif]-->
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet/less" type="text/css" href="assets/less/app/core.less">
</head>
<body style="">
    <!--[if lt IE 7]>
        <div class="alert alert-danger">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</div>
    <![endif]-->

    <header>
        <section id="top-bar">
            <div class="col-sm-6 col-sm-offset-4">
                Login form
            </div>
            <div class="col-sm-2">
                Create an account
            </div>
        </section>
    </header>

    <script type="text/javascript" src="assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="assets/js/less.js"></script>
        <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>

</body></html>

因此我将less.js文件与core.less文件一起包含在内

core.less文件@import url("../bootstrap/bootstrap.less"); bootstrap.less文件，而bootstrap.less文件导入所有相关的较少文件。如果您查看Chrome中的开发人员工具，则会包含所有较少的文件，包括我要导入的所有bootstrap.less文件。所以他们正在正确导入，但是，他们没有任何造型。我甚至只尝试了@import "path/to/bootstrap.less";，它就像它那样导入它......但不是造型。

我的core.less文件：

@import url("../bootstrap/bootstrap.less");

//
// Variables
// --------------------------------------------------


// Scaffolding
// -------------------------

@body-bg:               #1d2a37;
@text-color:            #3b3b3b;

// Links
// -------------------------

@link-color:            #67ae10;
@link-hover-color:      darken(@link-color, 15%);

// Typography
// -------------------------

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       'AR JULIAN', serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-serif;

@font-size-base:          1.2em;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            1.6em
@font-size-h2:            @font-size-h1 - 0.1;
@font-size-h3:            @font-size-h1 - 0.2;
@font-size-h4:            @font-size-h1 - 0.3;
@font-size-h5:            @font-size-base;
@font-size-h6:            @font-size-base - 0.1;

@line-height-base:        1.56;
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    400;
@headings-line-height:    1.1;
@headings-color:          inherit;

我也尝试删除所有变量覆盖并刚刚离开@import行，但它仍然只是加载导入文件而不应用样式。

但是，当我只是<link>来bootstrap.less而不是通过我的core.less文件时，它加载一切正常，样式表应用得很好。但是，当然，我希望能够覆盖bootstrap的variables.less文件以及拥有自己的样式表。

我在这里做@ Adam的建议：Bootstrap variable overriding with LESS

感谢您的帮助..

导入的文件较少但没有样式

0 个答案: