導入外部更少文件到使用的WebPack

我在assets/less/color.less較少文件，其中包含一些變量的app.component.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', 
    }, 
] 
},

2016-12-01 ed-tester

忽略檢查器，它會編譯嗎？你有沒有配置less-loader等 –

@JohnMee：謝謝你的迴應。我對上述問題進行了更改，並添加了less-loader信息。 –

發佈錯誤。 –

我試圖做同樣的，當我發現你的問題。我的問題是我不得不使用相對路徑而不是絕對路徑。所以對我來說

我不得不將其導入以下內容：

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

2016-12-28 11:31:56

問題是裝載機。它被設置爲raw，應該更改爲以下內容：

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

2017-01-23 17:06:41

回答