.net core使用LESS

2021-02-01 19:02:14 阅读：148 来源： 互联网

标签：core wwwroot pipe less require LESS gulp net css

参考：https://dotnetthoughts.net/using-less-css-with-aspnet-core/

项目目录下创建package.json

{
  "name": "gzblogs",
  "version": "1.0.0",
  "description": "An ASP.NET Core application for getting started with Less",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "private": true,
  "keywords": [
    "aspnetcore",
    "less"
  ],
  "author": "anuraj",
  "license": "MIT",
  "devDependencies": {
    "gulp": "3.9.1",
    "gulp-less": "3.3.2",
    "gulp-clean-css": "3.9.0"
  }
}

执行npm install

创建：gulpfile.js

var gulp = require("gulp"),
    cleanCss = require("gulp-clean-css"),
    less = require("gulp-less");

gulp.task("default", function () {
    return gulp.src('wwwroot/less/*.less')
        .pipe(less())
        .pipe(cleanCss({ compatibility:  'ie8' }))
        .pipe(gulp.dest('wwwroot/css'));
});

编辑项目.

结尾处添加：

 <Target Name="PreBuild" BeforeTargets="PreBuildEvent">
    <Exec WorkingDirectory="$(ProjectDir)" Command="node_modules\.bin\gulp" />
  </Target>

测试：

在wwwroot目录下创建一个less文件夹，并添加一个less文件，此时，css文件夹下并没有同名的css文件

项目重新生成后观察css目录中，多了和less同名的css文件：

标签：core,wwwroot,pipe,less,require,LESS,gulp,net,css
来源： https://www.cnblogs.com/GarsonZhang/p/14358482.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

.net core使用LESS