Less import 外部樣式

這是我在使用 Less 時遇到的問題

當我要引用外部的樣式，例如 google font：

@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great');

@default-color: #333;

body{
	color: @default-color;
	font-family: 'Fredericka the Great', cursive;
}

會被編譯成如下的 css：

@font-face {
	font-family: 'Fredericka the Great';
	font-style: normal;
	font-weight: 400;
	src: url(https://fonts.gstatic.com/s/frederickathegreat/v15/9Bt33CxNwt7aOctW2xjbCstzwVKsIBVV-9Sk.ttf) format('truetype');
}
body {
	color: #333;
	font-family: 'Fredericka the Great', cursive;
}

可是，外部的 CSS 我並不想要直接將之轉換，我想要匯出的 CSS 依舊使用 @import

查了很久後終於找到，在LESS的 import 有引用選項可以用，使用 @import(css) 就可以解決。

以下是官網對於@import(css) 的說明

Use @import (css) to treat imported files as regular CSS, regardless of file extension. This means the import statement will be left as it is.

@import (css) url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great');

@default-color: #333;

body{
	color: @default-color;
	font-family: 'Fredericka the Great', cursive;
}

將原先的 less code 改成上面這樣後，匯出的 CSS 就會變成：

@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great');


body{
	color: #333;
	font-family: 'Fredericka the Great', cursive;
}

除了 css 外，less 還有其他引用選項，詳細請參考官網說明。

參考資料

LESS - Import Options CSS Keyword. Tutorialspoint. https://www.tutorialspoint.com/less/import_options_css.htm

(2018, January 10). LESS 导入CSS选项关键字. W3cschool. https://www.w3cschool.cn/less/import_options_css.html