在MVC布局中结合Sitefinity CSS

时间:2016-05-03 08:02:49

标签: sitefinity

在Sitefinity WebForms中,您有一个ResourceLinks控件,允许您组合多个,但您在MVC布局中使用了什么?

我不确定剃须刀助手@ Html.StyleSheet是否可以完成这项工作?

将所有CSS文件添加到App_Data \ Sitefinity \ WebsiteTemplates [template_folder] \ App_Themes [theme]中的Global文件夹将自动将它们添加到站点,但不会将它们组合在一起。

我们正在使用Sitefinity 8.x并寻找一种压缩和组合JS和CSS的明确方法,但这些选择看起来很渺茫。

1 个答案:

答案 0 :(得分:3)

随着从webforms转移到mvc,Sitefinity没有特别引入新的捆绑器或其他东西,所以你只剩下2个默认选项,但他们似乎选择了#3方法。

1)使用.less和.sass作为构建过程的一部分进行预处理。

因此,在您的主题文件夹中,您将拥有global.less(或scss或sass),它们基本上使用@import指令将它们组合在一起。     安装VisualStudio扩展,如Mad's Kristensen Bundler and Minification VS Extension(以前是WebEssentials的一部分),然后在VS设置中定义它应该在构建时编译和缩小。     然后,每次构建或发布时,您的一个捆绑和压缩的.min.css将可用于Sitefinity。

2)第二个选项是使用默认的ASP.NET Web Optimization。

在VisualStudio中定义静态包,然后通过@Styles.Render@Scripts.Render使用这些包来输出它们。

3)最后,新的Feather方法增加了一种新的方法,它使用当前时髦的Grunt方法来捆绑和优化你的风格和脚本。

在/ ResourcePackages文件夹中,你已经看到了一个gruntfile.js文件,它有一个你可以运行的任务,然后可以编译(并可以扩展到前缀,捆绑,缩小等)你的.sass到.min .css然后可以添加到您的解决方案中。

此处可以看到示例(https://github.com/Sitefinity/feather-packages/blob/master/Bootstrap/gruntfile.js

我使用上述方法的组合来获得Sitefinity的最大结果,其中您使用选项1让VS构建您的核心/基本CSS和JS,然后使用Web.Optimization包含它们。 然后可以通过css小部件手动包含任何其他页面或小部件相关的样式或JS,该小部件通过选项3编译。

一旦您更熟悉这种新方法,您就可以按需创建和加载优化的.css和.js - 即使使用RequireJS方法加载它们依赖于在页面上拖放的小部件。鉴于最新的小工具和小玩意,RequireJS可能看起来过时,但是使用v9.0,它仍然被Sitefinity本身用于添加内联编辑功能。

如果您需要有关选项3的更多信息,请告诉我。我很乐意通过一些代码片段扩展我的答案,或者根据我如何量身定制它们的示例脚本。