【Webpack】样式处理 - 样式预处理

样式预处理是在开发中会使用一些样式预编译语言,如scss,less等,在项目打包过程中再将这些语言转换为css,借助这些语言强大和便捷的特性,可以降低项目的开发和维护成本。

下面是目前最主流的两种预编译语言是如何配置的

sass和scss

sass本身是对css的语法增强,现在使用更多的是scss

在安装和配置都是sass-loader,而实际的文件后缀是.scss

sass-loader就是将scss语法编译为css,因此在使用时通常还要搭配css-loader和style-loader。loader本身只是编译核心库和webpack的连接器,因此还要安装node-sass,node-sass是真正用来编译scssde

用npm install 来安装包

接着来添加处理scss文件的webpack配置

dart 复制代码
module:{
	rules:[
		{
			test:/\.scss$/,
			use:{'style-loader','css-loader','sass-loader'}
		}
	]
}

另外,如果想要在浏览器的调试工具里查看源码,需要分别为sass-loader和css-loader单独添加source map的配置想

dart 复制代码
module:{
	rules:[
		{
			test:/\.scss$/,
			use:[
				'style-loader',
				{
					loader:'css-loader',
					options:{
						sourceMao:true
					},
				},
				{
					loader:'sass-loader',
					options:{
						sourceMao:true
					},
				},
				]
		}
	]
}

less

less也是对css的一种扩展,与scss类似,也需要安装loader和其本身编译模块,在配置上也和scss十分类似

dart 复制代码
module:{
	rules:[
		{
			test:/\.less/,
			use:[
				'style-loader',
				{
					loader:'css-loader',
					options:{
						sourceMao:true
					},
				},
				{
					loader:'less-loader',
					options:{
						sourceMao:true
					},
				},
				]
		}
	]
}

less支持多种编译过程中的配置,可以直接通过loader的options将这些配置传入(注意使用驼峰命名)

css modules

css modules是最近比较流行的一种开发模式,其理念是把css模块化,让css也拥有模块的特点,具体如下:

  1. 每个css文件中的样式都拥有单独的作用域,不会和外界发生命名冲突
  2. 对css进行依赖管理,可以通过相对路径引入css文件
  3. 可以通过composes轻松复用其他css模块

使用css modules不需要额外安装模块,只要开启css-loader中的modules配置项即可

dart 复制代码
module:{
	rules:[
		{
			test:/\.css/,
			use:[
				'style-loader',
				{
					loader:'css-loader',
					options:{
						sourceMao:true,
						locaIdentName:'[name]__[local]__[hash:base64:5]',
					},
				},
				]
		}
	]
}

这里localIdentName配置项是用于指明css代码中的类名会如何来编译,例如,源码是下面的形式:

dart 复制代码
.title{
	color:#f938ab
}

经过编译后可能将成为.style__title__1CFy6

因此上面的参数可以解释为

name\]指的是模块名,这里被替换为style \[local\]指代的是原本的选择器标识符,这里被替换为title \[hash:base64:5\]指代的是一个5位的hash值,这个值是根据模块名和标识符计算的,因此不同模块中相同的标识符也不会造成样式冲突

相关推荐
江城开朗的豌豆4 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆4 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆5 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆6 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er13 分钟前
【前端工程化】前端组件模版构建那些事
前端
前端 贾公子13 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆18 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山26 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45335 分钟前
css模块化以及rem布局
前端·javascript·css
小熊哥^--^36 分钟前
条件渲染 v-show与v-if
前端