06 webpack4.0学习笔记——配置文件_sass-loader使用

概述

        sass-loader主要是将scss这类样式文件转换处理成我们常规的css样式文件，共浏览器识别调用，此loader也是我们经常使用的，所以接下来我们做一下介绍。

 

具体操作步骤

        1、此demo还是继续沿用前两篇文章中的demo代码，我们继续在rules中添加sass-loader的配置规则，如下：

const path=require('path');

module.exports={
	entry:'./input.js',
	output:{
		path:path.resolve(__dirname,'dist'),
		filename:'output.bundle.js'
	},
	mode:'development',
	module:{
		rules:[
			{
				test:/\.(png|jpg|gif)$/i,
				use:[
					{
						loader:'url-loader',
						options:{
							limit:919200
						}
					}
				]
			},
			{
			  test: /\.(js|jsx)$/,
			  exclude: /(node_modules|bower_components)/,
			  use: {
				loader: 'babel-loader',
				options: {
				  presets: ['@babel/preset-env'],
				  plugins: ['@babel/plugin-transform-react-jsx']
				}
			  }
			},
			{
			  test: /\.scss$/,
			  use: [{
				  loader: "style-loader" // 将 JS 字符串生成为 style 节点
			  }, {
				  loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
			  }, {
				  loader: "sass-loader" // 将 Sass 编译成 CSS
			  }]
			}
		]
	}
};

        2、然后根据官网的安装命令来安装sass-loader，如图：

npm install sass-loader node-sass webpack --save-dev

 

        3、在配置规则中看到除了使用sass-loader外，还使用了css-loader和style-loader，所以我们也继续安装上这两个loader，如图：

        4、安装完成之后，我们在目录下新建一个“test.scss”文件，然后添加一些scss的基础代码，如下：

$color: #000000;

body{
	background-color: $color;
}

        5、在input.js文件中引入上述的文件，如下：

import './test.scss';

        6、然后进行打包，打包结束后我们打开结果文件，搜索body关键字可看到，它的背景色属性值不再是我们之前定义的变量，而是常规的颜色值，如下：

         至此，sass-loader的使用介绍结束。

 

 

总结

        本文使用较少的内容来简单介绍了一下sass-loader的基本使用，通过几篇关于loader的配置使用文章介绍，大家可以发现，其实loader的使用无非就是安装，然后在配置文件中配置rules，但是在这个过程中却是有很多的属性值要求我们大家去花时间学习。