css - 更少的媒体查询似乎没有编译

Question

我在 less 文件中有一个媒体查询，代码:

@phoneMin: 0px;
@tabletMin: 768px;
@smallDesktopMin: 992px;
@phoneMax: (@tabletMin - 1);
@tabletMax: (@smallDesktopMin - 1);

@atLeastTablet: ~"only screen and (min-width: @{tabletMin})";

当我@import 这个文件到另一个 less 文件并像这样使用我的媒体查询时:

.container {
    @media @atLeastTablet {
        margin-top: 160px;
    }
}

不仅媒体查询不起作用，而且它似乎也没有编译到生成的 css 文件中，该文件如下所示:

.container {
    margin-top: 160px;
}

编辑 我试图运行我的服务器，但现在收到以下错误消息:“Unexpected token(1:0)”指的是我的 less 中的第一个字符(句点)文件:

.blogPost {
^   .logo {

    }
}

在babel 6编译过程中抛出错误。这是堆栈跟踪:

at Parser.pp.raise (/usr/local/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/location.js:22:13)
at Parser.pp.unexpected (/usr/local/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/util.js:91:8)
at Parser.pp.parseExprAtom (/usr/local/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:510:12)
at Parser.<anonymous> (/usr/local/lib/node_modules/babel-cli/node_modules/babylon/lib/plugins/jsx/index.js:404:22)
at Parser.parseExprAtom (/usr/local/lib/node_modules/babel-cli/node_modules/babylon/lib/plugins/jsx/index.js:404:22)
at Parser.pp.parseExprSubscripts (/usr/local/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:265:19)
at Parser.pp.parseMaybeUnary (/usr/local/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:245:19)
at Parser.pp.parseExprOps (/usr/local/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:176:19)
at Parser.pp.parseMaybeConditional (/usr/local/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:158:19)
at Parser.pp.parseMaybeAssign (/usr/local/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:121:19)

Answer 1

事实证明，问题在于尝试在下标中导入我的 less 与我的 webpack 入口点。将导入移至此处解决了该问题。