分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

webpack配置:less文件打包和分离

发布时间:2023-09-06 01:47责任编辑:苏小强关键词:配置webpack

一、less文件打包和分离

  1、要使用less,首先使用npm安装less服务;还需要安装Less-loader用来打包使用。

npm install ?less --save-devnpm install less-loader --save-dev 

  2、在module中配置

{ ???test: /\.less$/, ???use: [{ ???????loader: "style-loader" ????},{ ???????loader: "css-loader" ????},{ ???????loader: "less-loader" ???}]}

  3、在html中编写一个div,在css中新建一个less文件

<div id="leesBox"></div>
@base:yellowgreen;#leesBox{ ???width:300px; ???height:200px; ???background: @base;}

  4、引入到index.js中

import less from ‘./css/black.less‘;

  5、使用webpack进行打包,输入npm run server 查看效果

  6、less分离

二、sass文件打包和分离

1、安装:因为sass-loader依赖于node-sass,所以需要先安装node-sass

npm install node-sass --save-dev npm install sass-loader --save-dev 

  其他与less安装基本一致

webpack配置:less文件打包和分离

原文地址:https://www.cnblogs.com/goloving/p/8654176.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved