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

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

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

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


loader - 配置处理 scss 文件的 loader


配置处理 scss 文件的 loader

image.png

1.创建index.scss,在index.scss中写

htmlbody{

padding0

margin0

li{

font-size12px

line-height30px

}

}

2.在main.js中写

import ./css/index.scss

报错,需要一个合适的loader

3.点击终端

ps C:\Users\liulongbin\Desktop\day5\代码\webpack-study> npm i sass-loader     需要一个node-sass

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

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

//配置处理scss文件的第三方loader规则

4.重新启动

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

相关文章
|
8月前
vue-3d-model.umd.js报错You may need an appropriate loader to handle this file type怎么办?
vue-3d-model.umd.js报错You may need an appropriate loader to handle this file type怎么办?
|
缓存 自然语言处理 JavaScript
vue-loader做了哪些事情?
vue-loader做了哪些事情?
177 0
|
8月前
|
前端开发 JavaScript
常见loader
常见loader:
71 0
|
XML Java PHP
AS3 Loader与URLLoader的区别与比较
AS3 Loader与URLLoader的区别与比较
54 0
|
移动开发 监控 前端开发
plugin和loader
plugin和loader
59 0
|
JavaScript 前端开发
Vue 配置全局样式(style-resources-loader)
Vue 配置全局样式(style-resources-loader)
486 0
|
缓存 前端开发 JavaScript
【前端】style-loader和MiniCssExtractPlugin.loader
【前端】style-loader和MiniCssExtractPlugin.loader
256 0
|
前端开发
前端学习案例6-webpack中使用css-loader和style-loader
前端学习案例6-webpack中使用css-loader和style-loader
62 0
前端学习案例6-webpack中使用css-loader和style-loader
|
数据格式
写一个自定义loader,看完,就会
webpack的loader本质上是一个导出的函数,loader runner[1]会调用该函数,在loader函数内部,this的上下文指向是webpack,通常loader内部返回的是一个string或者Buffer。当前loader返回的结果,会传递给下一个执行的loader
366 0
写一个自定义loader,看完,就会
|
前端开发 开发者
loader - 配置处理 less 文件的 loader| 学习笔记
快速学习 loader - 配置处理 less 文件的 loader
loader - 配置处理 less 文件的 loader| 学习笔记