Question

在我的Angular 2应用程序中，我从原始css切换到less，以便我可以写：

.main-button {
  .btn;
  .btn-primary;
  padding: 1em;
}

而不是在我的html中到处堆叠类名。为了实现这一点，我需要：

在angular-cli.json中，更改：

"defaults": { "styleExt": "css", "prefixInterfaces": false }

到"styleExt": "less",
将foo.component.css重命名为foo.component.less并相应更新foo.component.ts。
在less less中，为了能够引用bootstrap类，我不得不：@import "~bootstrap/less/bootstrap";

这很好用，除了我现在在浏览器控制台中收到404错误：

jquery-1.12.3.min.js:2 GET http://localhost:4200/node_modules/bootstrap/fonts/bootstrap/glyphicons-halflings-regular.woff2 (anonymous function) @ jquery-1.12.3.min.js:2i @ jquery-1.12.3.min.js:2fireWith @ jquery-1.12.3.min.js:2ready @ jquery-1.12.3.min.js:2K @ jquery-1.12.3.min.js:2
foobar:1 GET http://localhost:4200/node_modules/bootstrap/fonts/bootstrap/glyphicons-halflings-regular.woff 
foobar:1 GET http://localhost:4200/node_modules/bootstrap/fonts/bootstrap/glyphicons-halflings-regular.ttf

我在@ icon-font-path上尝试了一些变体而没有成功。我在网络标签中检查了字体请求，然后查看http://localhost:4200/448c34a56d699c29117adc64c43affeb.woff2。

我也尝试过使用sass / scss。这需要附加模块bootstrap-sass和类似的include指令，但结果完全相同。

在没有404错误的情况下，这样做的正确方法是什么？

这是由ng serve提供的，默认情况下都是默认的。

Answer 1

我和sass有同样的问题：

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

https://github.com/igorzg/angular2-zero-to-hero/blob/master/ui/src/styles.scss

因此，你的风格应该更少。无：

$icon-font-path: "~bootstrap/fonts/";
@import "~bootstrap/less/bootstrap";

Answer 2

Angular-CLI会捆绑您的字体，如448c34a56d699c29117adc64c43affeb.woff2。如果你想要原始文件，也许你必须在服务器上发布它们......

Answer 3

尝试：ng set defaults.styleExt scss

Angular-cli 必须匹配全局和本地版本

运行ng init检查所有自动生成的文件中的更改

最后ng build

要保持所有内容同步，请尝试：

git clone https://github.com/angular/angular-cli.git
cd angular-cli
npm link

对于字体和资源，现在angular-cli假定基于源文件的路径：

"assets": [ "assets", "favicon.ico" ]

导入较少的bootstrap以扩展类会在glyphicons字体上创建404

3 个答案: