angular - 使用 Webpack 将外部 less 文件导入到 app.component.less 文件中

Question

Angular 2 应用

我在 assets/less/color.less 有一个 less 文件，其中包含一些变量。

@submenu :  #003C4F;
@sidebar :  #00495D;
@hover :    #006673;

我需要能够在位于 app/app.component.less 的组件的 less 文件中访问这些变量。我正在使用“webpack”来管理我的文件。

如何使用“webpack”将外部 .less 文件导入到组件的 .less 文件中？如下所示，进行简单的导入不似乎行不通。

//app.component.less

@import "assets/less/prm-color.less";

.grid-side {
  height: 100%;
  width: 45px;
  background-color: @sidebar;
}

一切编译正常，我只是在检查器中收到该变量的错误。

Invalid Property Value

这是我的 less-loaders:

module: {
 loaders: [
  {
    test: /\.less$/,
    loader: 'raw',
  },
 ]
},

Answer 1

当我发现你的问题时，我正试图做同样的事情。对我来说，问题是我必须使用相对路径而不是绝对路径。

所以对我来说，我必须导入以下内容:

@import "../assets/less/prm-color.less";