ng-boilerplate LESS 文件未编译为构建目录中的 CSS 文件答案

【问题标题】：ng-boilerplate LESS files are not compiling to the CSS file in build directoryng-boilerplate LESS 文件未编译为构建目录中的 CSS 文件
【发布时间】：2023-03-24 03:20:01
【问题描述】：

CSS（来自 LESS）没有在我的 ng-boilerplate 应用程序中呈现或编译。

我正在使用这些教程here 使用 ng-boilerplate 和 rails 创建一个应用程序，并且我们已经将一个工作的 rails 服务器与 angular.角度可以在任何页面上工作......就像我们可以使用：

$scope.animal = "dogs"

和

<div> I like {{animal}}! </div>

得到

I like dogs!

但是，Less 和 CSS（它是从一个功能性 ng-boilerplate 应用程序复制和粘贴的，它可以正常工作并从所有不同的目录编译）不会编译到构建目录或渲染。事实上，在这个新的应用程序（带有导轨的应用程序）中，即使是来自 ng-boilerplate 模板的原始 css/less 也无法编译或渲染。

按照教程的建议，我们尝试使用以下命令，这些命令创建了奇怪的嵌套构建目录（构建内部构建内部的构建），但没有解决问题。

cd public
ln -s ../build UI

同时，UI 文件夹使用符号链接链接到构建文件夹，但是...

LESS（来自不同目录中的不同文件）都应该编译成一个名为 ng-boilerplate.css 的 CSS 文件（它在没有 rails 的原始应用程序中这样做），而是有一个名为 ng-boilerplate- 的文件0.3.1.css，为空。我尝试重命名它，但每次 grunt 构建它时它都会将自己重命名为 0.3.1。

我使用的是 rails 4.2.1 版本，ruby 说它是 2.1.0p0。

【问题讨论】：

最好检查less代码是否有任何错误。

标签： ruby-on-rails angularjs gruntjs less ngboilerplate

【解决方案1】：

我希望您已经找到了解决方案，因为我意识到这篇文章已经很老了。但是，由于这个问题在我用谷歌搜索时出现得相当高，我觉得它应该有一个答案。

使用 ng-boilerplate 时，您需要注意，虽然它的编译过程会找到您所有的 JS 文件并生成良好的编译 JS 代码，但对于 LESS 文件在其构建过程中却没有这样做。如果你查看目录 'src/app/less/' 并查看 'main.less' 文件，你会看到一个小注释，提到他想自动化这个过程。相反，不幸的是，此时您需要手动导入所有 LESS 文件。

对于不确定的人来说，导入文件的 LESS 方法是：

@import '../app/less/fileToImport.less'

路径可以是相对的或绝对的。

【讨论】：