Vue项目中使用预处理器，可以有效减少css代码量，推荐使用Sass、Scss、Less预处理器。可以在创建项目的时候选择预处理器(Sass/Less/Stylus)。如果当时没有选择，内置的webpack仍然会被预配置为可以完成所有的处理，也可以手动安装相应的webpackloader：Sassnpm

什么是CSS预处理器CSS预处理器定义了一种新的语言，它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。开发者只需要使用这种语言进行编码工作，减少枯燥无味的CSS代码

搭建项目以及初始化配置vue create tsvuebtn这里使用了vueCLI3自定义选择的服务，我选择了ts、stylus等工具。然后创建完项目之后，进入项目。使用快捷命令code.进入Vscode编辑器(如果没有code.，需要将编辑器的「bin文件目录地址」放到环境变量的path中)。然后，我进入编辑器之后，进入设置工作区，随便设置一个

stylus特点富于表现力、具有健壮性、功能丰富、动态编码不需要写CSS的冒号、分号、大括号和LESS、SASS功能类似，会这些的入手很快stylus特点安装使用stylus语法(一)选择器(二)变量(三)插值(四)运算符(五)内置函数(六)尾参数…(七)@extend继承

前言本文系统的梳理了vuecli3搭建项目的常见用法，目的在于让你快速掌握独立搭建vue项目的能力。你将会了解如下知识点：如何安装项目插件添加浏览器支持如何配置scss/stylus共享全局变量如何整合elementUI等第三方框架并实现按需引入配置单/多页面如何配置自定义环境变量如何在vue.config.js定制自己的we