vue项目中sass安装步骤操作详解

sass等预编译语言在vue项目中基本是必选操作,本文将详细介绍如何在一个vue新项目中使用sass。

1、安装sass依赖包(cmd中打开你的根目录)逐个运行以下代码


	
  1. npm install node-sass --save-dev         //安装node-sass
  2. npm install sass-loader@7.3.1 --save-dev     //安装sass-loader
  3. npm install style-loader --save-dev         //安装style-loader

注:这里安装的sass-loader是指定版本,并非是最新版本,在实际运用中你会发现,如果你安装以下代码会出现提示您的sass版本过高。所以这时就需要你根据自己的需求来安装相对的低版本sass-loader


	
  1. npm install sass-loader --save-dev //安装最新版本

2、在webpack.base.conf.js中添加配置


	
  1. { //从这一段上面是默认的!不用改!下面是没有的需要你手动添加,相当于是编译识别sass!
  2. test: /\.scss$/,
  3. loaders: ["style", "css", "sass"]
  4. } ,

3、vue项目中具体使用

4、效果如图:

 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.duanlonglong.com/qdjy/180.html