vuecli3中less和scss的安装和使用

我们项目开发中经常遇到样式里面会使用less和scss写法。

less，scss和stylus都是css的预处理器，首先我们要明白我们为什么要使用less，scss和stylus，因为css只是一种标记语言，其中并没有函数变量之类的，所以当写一些复杂样式的时候存在局限性，不灵活，而less，scss和stylus正好弥补了css的这些局限，让css可以更灵活的编写样式，所以运用scss就不需要像写css时队友的语法需要做hack处理。scss 是 sass 3 引入新的语法，其语法完全兼容 css3，并且继承了 Sass 的强大功能。也就是说，任何标准的 css3 样式表都是具有相同语义的有效的 scss 文件。（使用他也是为了防止样式的全局污染）

一、less安装和使用

1，安装依赖

	（1），安装less less-loader
	npm install less less-loader --save-dev
	
	（2），安装vue-cli-plugin-style-resources-loader style-resources-loader
	（这里建议使用vue add 的方式 因为会弹出SCSS/LESS/Stylu/postcss 供你选择 这里选择less）
	vue add style-resources-loader vue-cli-plugin-style-resources-loader
	

2，完成之后，会在vue.config.js自动添加less的配置，当然变量文件是需要手动添加的

# 会自动生成这些代码 我们只需要在  path.resolve写我们less文件所在的位置即可1/
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, './src/assets/style/varibles.less') 
      ]
    }
  }

3，接下来 就可以使用了，在vue文件中的style标签中添加lang=”less”即可在标签中使用less，或者外部引入less ，就可以开始愉快的使用less了

<style lang="less" scoped>
@import "../../static/common.less";
bg{
   background: red;
}
</style>

二、scss安装和使用

1，安装 node-sass 、 sass-loader

cnpm i node-sass --save-dev
cnpm i --save-dev sass-loader@8.x (因为有些版本兼容问题，我选择了低版本。高版本webpack不兼容)

或者
npm install node-sass --save
npm install sass-loader --save
npm install style-loader --save
或者
npm install node-sass sass-loader style-loader --save

2，在vue.config.js里面配置

（1），我在src/assets/scss/style.scss新建了一个style.scss文件，里面写了如下图代码

（2），然后需要在vue.config.js里面进行配置，如果还不知道什么是vue.config.js的同学，去查询cli3官网，配置如下

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/assets/scss/style.scss";
        `
      }
    }
  }
}

（3），上面代码的@代表了src目录

然后我在vue文件的style里面就可以这么写：