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，但是在這個過程中卻是有很多的屬性值要求我們大家去花時間學習。