loader - 配置处理 less 文件的 loader| 学习笔记

简介: 快速学习 loader - 配置处理 less 文件的 loader

开发者学堂课程前端自动化构建工具 Webpackloader - 配置处理 less文件的loader】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/587/detail/8218


loader - 配置处理 less 文件的 loader


配置处理 less 文件的 loader

1.创建index.less,在index.less

ul{

padding0

margin0

}

2.在main.js中导入

import./css/index.less

报错,需要一个合适的loader

3.点击终端

ps C:\Users\liulongbin\Desktop\day5\代码\webpack-study> npm i less-loader

ps C:\Users\liulongbin\Desktop\day5\代码\webpack-study> npm i less-D并不需要把less定义到webpack.config中去,只需要装less

4.新建一个规则:

{ test/ \.less$/,use:[style-loader,css-loader','less-loader]}//配置处理less文件的第三方loader规则

5.重新启动

ps C:\Users\liulongbin\Desktop\day5\代码\webpack-study> npm run dev

image.png

相关文章
|
6月前
|
前端开发 JavaScript
常见loader
常见loader:
68 0
|
XML Java PHP
AS3 Loader与URLLoader的区别与比较
AS3 Loader与URLLoader的区别与比较
46 0
|
移动开发 监控 前端开发
plugin和loader
plugin和loader
54 0
|
缓存 前端开发 JavaScript
【前端】style-loader和MiniCssExtractPlugin.loader
【前端】style-loader和MiniCssExtractPlugin.loader
217 0
vue3+ts+vite读取静态资源图片和环境变量
vue3+ts+vite读取静态资源图片和环境变量
816 0
vue3+ts+vite读取静态资源图片和环境变量
|
数据格式
写一个自定义loader,看完,就会
webpack的loader本质上是一个导出的函数,loader runner[1]会调用该函数,在loader函数内部,this的上下文指向是webpack,通常loader内部返回的是一个string或者Buffer。当前loader返回的结果,会传递给下一个执行的loader
354 0
写一个自定义loader,看完,就会
|
前端开发 开发者
loader - 配置处理 scss 文件的 loader|学习笔记
快速学习 loader - 配置处理 scss 文件的 loader
loader - 配置处理 scss 文件的 loader|学习笔记
|
缓存 Rust 前端开发
60行代码实现一个基于esbuild按需加载的loader(一)
大家好,我是Fly, 最近研究的技术就是esbuild,一个新技术的 出现必然是解决是某些问题的, 这不我就打算用它来进行项目的编译速度进行操刀了, 前端对于tsx 的编译方式 无非是两种,
60行代码实现一个基于esbuild按需加载的loader(一)
|
前端开发
60行代码实现一个基于esbuild按需加载的loader(二)
设计 整个插件的构建思路 就是 读取配置, 然后判断是否需要 按需加载, 如果需要 就利用的 babel 能力, 去做转化, 转换完成用 esbuild 去做编译就好了。
60行代码实现一个基于esbuild按需加载的loader(二)
|
前端开发 JavaScript 开发者
loader - 配置处理 css 样式表的第三方 loader| 学习笔记
快速学习 loader - 配置处理 css 样式表的第三方 loader