Question

我正在尝试在较少css预处理器中使用服务器本地路径来加速字体加载（从fonts.googleapis.com中提取可能需要300毫秒）。

使用此路径有效：

@web-font-path: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700";

我尝试过更改为本地路径：

@web-font-path: "../../fonts/Roboto";

然后使用路径：

.web-font(@path) {
  @import url("@{path}");
}
.web-font(@web-font-path);

然而，当我使用webpack编译它时更改为本地后，我收到一个错误：

ERROR in ./~/css-loader!./~/less-loader!./stylesheets/less/index.less
Module build failed: variable @path is undefined
near lines:
.web-font(@web-font-path);

不知何故@path变量与web url一起使用（似乎没有得到@path与@ web-font-path相关，因为我没有在任何地方定义@path），但没有使用本地url。

我在mt webpack.config.js模块中使用webpack和以下内容编译.less文件：section：

  {
    test: /\.less$/,
    include: INPUT_DIR,
    loader: 'style!css!less',
  },

NB我也尝试过测试：

@web-font-path: "../../fonts/Roboto";
@import url(@web-font-path);

但是我从webpack得到以下错误（我没有Roboto.less文件，Roboto是一个包含.eot，.woff，.svg文件的目录）：

Module build failed: Cannot resolve 'file' or 'directory' ../../fonts/Roboto.less

使用以下代码：

@web-font-path: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700";
@import url(@web-font-path);

我收到此错误：

Module build failed: Cannot read property 'rules' of undefined
 @ undefined (line undefined, column undefined)

在less中使用字体的本地路径

0 个答案: