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

相关文章
|
10月前
|
前端开发 JavaScript
nuxt项目:css相关插件加载顺序问题【extract-css-chunks-webpack-plugin】
nuxt项目:css相关插件加载顺序问题【extract-css-chunks-webpack-plugin】
151 0
|
5月前
|
前端开发 JavaScript
常见loader
常见loader:
34 0
|
6月前
|
XML Java PHP
AS3 Loader与URLLoader的区别与比较
AS3 Loader与URLLoader的区别与比较
25 0
|
6月前
|
移动开发 监控 前端开发
plugin和loader
plugin和loader
30 0
|
9月前
|
JavaScript 前端开发
Vue 配置全局样式(style-resources-loader)
Vue 配置全局样式(style-resources-loader)
270 0
|
10月前
|
JavaScript 前端开发 Ruby
打包出来的 common.js/umd.js 是啥?
打包出来的 common.js/umd.js 是啥?
120 0
|
12月前
|
缓存 前端开发 JavaScript
【前端】style-loader和MiniCssExtractPlugin.loader
【前端】style-loader和MiniCssExtractPlugin.loader
123 0
|
前端开发
前端学习案例6-webpack中使用css-loader和style-loader
前端学习案例6-webpack中使用css-loader和style-loader
37 0
前端学习案例6-webpack中使用css-loader和style-loader
|
数据格式
写一个自定义loader,看完,就会
webpack的loader本质上是一个导出的函数,loader runner[1]会调用该函数,在loader函数内部,this的上下文指向是webpack,通常loader内部返回的是一个string或者Buffer。当前loader返回的结果,会传递给下一个执行的loader
296 0
写一个自定义loader,看完,就会
|
资源调度 前端开发 JavaScript
4、处理css文件(css-loader加载器与mini-css-extract-plugin分离CSS文件插件)
4、处理css文件(css-loader加载器与mini-css-extract-plugin分离CSS文件插件)
179 0