使用 Webpack 将外部 less 文件导入 app.component.less 文件答案

【问题标题】：Import a external less file into an app.component.less file using Webpack使用 Webpack 将外部 less 文件导入 app.component.less 文件
【发布时间】：2016-12-01 18:25:11
【问题描述】：

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;
}

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

无效的属性值

这是我的较少加载器：

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

【问题讨论】：

忽略检查器，它编译了吗？你有没有配置过less-loader等
@JohnMee：感谢您的回复。我对上面的问题进行了更改并添加了 less-loader 信息。
发布错误。
@JohnMee 重新添加错误

标签： angular import webpack less angular2-components

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

问题在于加载程序。设置为raw，应该改成如下：

module: {
 loaders: [
  {
    test: /\.less$/,
    loader: ["css-loader", "less-loader"],
  },
 ]
},

【讨论】：