asp.net mvc 中使用less

xunbaogang

于 2021-05-31 10:23:04 发布

阅读量598

点赞数

分类专栏： HTML前端设计文章标签： less

本文链接：https://blog.csdn.net/xunbaogang/article/details/117411156

版权

HTML前端设计专栏收录该内容

24 篇文章 0 订阅

订阅专栏

在asp.net mvc 中是可以直接使用less文件的，这里通过引用的方式，实现less样式的操作

展示效果：

实现过程：

1）首先创建一个asp.net mvc 项目

2）在Content中新增“StyleSheet1.less”，配置上内容

@primarycolor: red;
@color:#800080;
h1{
color: @primarycolor;
}
h3{
color: @color;
}

3）通过nuget安装less，文件解析程序”dotless“,我这里安装的是v1.5.2版本，原因是依赖最少

4）编写less文件处理程序

 public class LessTransform : IBundleTransform
    {
        public void Process(BundleContext context, BundleResponse response)
        {
            response.Content = dotless.Core.Less.Parse(response.Content);
            response.ContentType = "text/css";
        }
    }

5）在BundleConfig.cs文件中，添加引用配置信息

 var lessbundle = new Bundle("~/bundles/less").Include("~/Content/*.less");
            lessbundle.Transforms.Add(new LessTransform());
            lessbundle.Transforms.Add(new CssMinify());
            bundles.Add(lessbundle);

6）正式使用，代码如下

<head>
    <meta name="viewport" content="width=device-width" />
    <title>TestIndex</title>
    @Styles.Render("~/bundles/less")
</head>
<body>
    <div class="row"> 
        <h1>test</h1>
    </div>
</body>
</html>