• 【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配置

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

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

    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十分类似

    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配置项即可

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

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

    .title{
    	color:#f938ab
    }
    

    经过编译后可能将成为.style__title__1CFy6
    因此上面的参数可以解释为
    [name]指的是模块名,这里被替换为style
    [local]指代的是原本的选择器标识符,这里被替换为title
    [hash:base64:5]指代的是一个5位的hash值,这个值是根据模块名和标识符计算的,因此不同模块中相同的标识符也不会造成样式冲突

  • 相关阅读:
    Flask Web——Jinjia2模板的使用
    前端设计跨异步处理手段
    将“万词王”离线转化为“文络之心“插件之一:复现 wantwords Python/Pytorch 开源项目
    基于单片机的推箱子游戏仿真设计(#0013)
    虚拟机没网,ping不同外网,ping不通主机,ping不通别的虚拟机
    ffmpeg.dll在哪个文件夹?怎么快速的修复ffmpeg.dll文件的丢失
    Vue组件的计算属性和普通属性区别、属性侦听器的作用
    会计学试题以及答案
    el-upload拍照上传多个文件报错 ERR_UPLOAD_FILE_CHANGED问题
    C++小型公司人员信息管理系统
  • 原文地址:https://blog.csdn.net/loyd3/article/details/139247824