Question

我在较少的文件中有媒体查询，代码：

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

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

当我将此文件导入另一个较少的文件并使用我的媒体查询时：

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

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

.container {
    margin-top: 160px;
}

编辑我试图运行我的服务器，现在我收到以下错误消息：＆＃34;意外令牌（1：0）＆＃34;在我的一个较少的文件中引用第一个字符（句点）：

.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

事实证明问题在于尝试在下标vs我的webpack入口点导入我的less。在此处移动导入修复了问题。

较少的媒体查询似乎没有被编译

1 个答案: