[Vue.js] component中使用sass

建立時間: 2016-09-25 10:32:19
更新時間: 2016-09-25 10:32:19

說明

通常一個vue.js的component中

會包含template, script, style三個部分

而style的部分我們可以直接使用sass

經由一個叫sass-loader的webpack套件編譯後

轉成css

 

安裝sass loader

 npm install sass-loader --save-dev

 

設定webpack.config.js

 module.exports = {
 	module: {
 		loaders: [
 			{
 				test: /\.scss$/,
 				loaders: ['style', 'css', 'sass']
 			}
 		]
 	}
 };

 

開始在component中使用sass

要注意的是

style tag的lang屬性一定要使用sass

style內為scss也一樣

否則會編譯出錯

 <template>
 	<div id="app">
 		<h1>
 			{{ msg }}
 		</h1>
 		<br>
 
 		<button>
 			{{ btn }}
 		</button>
 	</div>
 </template>
 
 <script>
 import Vue from 'vue'
 export default {
 	data() {
 		return {
 			msg: 'Title',
 			btn: 'Click Here'
 		}
 	}
 }
 </script>
 
 <style lang="sass">
 body {
 	h1 {
 		color: red;
 	}
 
 	button {
 		background-color: lightblue;
 	}
 }
 </style>