使用Webpack

Question

Angular 2申请

我在assets/less/color.less的文件较少，其中包含一些变量。

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

我需要能够在位于app/app.component.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',
  },
 ]
},

Answer 1

当我找到你的问题时，我也试图这样做。对我来说问题是我必须使用相对路径而不是绝对路径。

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

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

Answer 2

问题是装载机。它设置为raw，应更改为以下内容：

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