less 和 Scss 的配置使用以及特点

less 安装依赖

•  npm install less less-loader --save
• 或者
• cnpm install less less-loader --save

修改配置 在 vue 项目中 build/webpack.base.conf.js： moduls 对象的 rules 数组中最后添加

{
 test: /\.less$/,
 loader: "style-loader!css-loader!less-loader"
 }

  引入 在每个想要使用 less 的 vue 文件中

// style 加上 lang=“less”

SCSS SCSS 即是 SASS 的新语法，是 Sassy CSS 的简写，是 CSS3 语法的超集，也就是说所有有效的 CSS3 样式也同样适合于 SASS SASS 是 CSS3 的一个扩展，增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或 WEB 框架插件把它转换成标准的、格式良好的 CSS 代码 SCSS 是 SASS 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 SASS 的强大功能 唯一不同的是，SCSS 需要使用分号和花括号而不是换行和缩进 SCSS 对空白符号不敏感   安装依赖

npm install node-sass --save-dev // 安装 node-sass
npm install sass-loader --save-dev // 安装 sass-loader
npm install style-loader --save-dev //安装 style-loader

出现以下问题可能是版本错误 Modele build failed: TypeError: this.getResolve is not a function at Object.loader... 处理方法 将 "sass-loader": "^8.0.0"，更换成了 "sass-loader": "^7.3.1" package.json 中查找替换 npm install npm run dev   特性： 一、（节点）可嵌套性 这个是基础，用的太多太多了，必须掌握 二、变量 变量以$开头（通常网站会有基础变量，譬如基础字体，基础色调等，可以将他们赋值给一 个变量，以后调用变量就好了，很类似 js 里的变量） 三、 Mixins(混合@mixin)：可重用性高，可以注入任何东西 注意点： 1、可以相互调用，但是不能拿自己调用自己，形成递归 2、通过@include 引用 四、@extend：允许一个选择器继承另一个选择器 五、 @function:函数功能，用户使用@function 可以去编写自己的函数（常用） 使用语法： 使用 @function+函数名称，每个函数都需要有返回值的内容 六、引用父元素&：在编译时，&将被替换成父选择符（常用） 七、计算功能（会用 但是不多吧） 八、组合连接： #{} ： 变量连接字符串（目前用到的是这个） 九、循环语句：（很少用到） 十、if 语句：（很少用到）