Vue 引入.scss文件

Vue 引入.scss文件

首先了解一下sass的知识:sass是一种对css的一种提升,可以通过编译生成浏览器能识别的css文件。sass技术的文件的后缀名有两种形式:.sass和.scss。这两种的区别在于.sass文件对代码的排版有着非常严格的要求,而且没有大括号,没有分号。(具体不做介绍)

引入

引入方法一:
	第一步需要在项目中引入
	 npm install sass-loader -D
	 npm install node-sass -D


引入方法二:
	使用官方Sass Loader的引入方法
	npm install sass-loader node-sass webpack --save-dev

	npm install style-loader css-loader --save-dev

使用.scss文件

<style lang="scss" scoped>   //必须要加上“<style lang="scss" scoped>,否则引入失败(提示保存)
	   @import "../assets/style/mixin.scss";  //引入方式


	  .mint-tabbar>.mint-tab-item.is-selected {
 		 background: #fafafa;
	 }

	 .mint-tabbar {
	  color: #818181;
  	  position: fixed;
      }


</style>
发布了30 篇原创文章 · 获赞 8 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/wg22222222/article/details/88710707