vue-cli中使用sass或者less

什么是sass、less？他们有什么区别？请移步官网！这里仅仅记录一下如何使用

开门见山。

1. sass    创建好vue脚手架后，打开命令行安装sass:

   脚手架虽然有配置sass，配置在build/utils.js，但对应的loader未安装 ,请执行以下命令：

   npm install --save-dev node-sass
   npm install --save-dev sass-loader

   
   

   在这里需要的注意的node-sass经常安装会出错，可以用cnpm，或者多安装几次。成功之后打开package.json文件，会有这两个信息然后打开任意一个vue文件，在style中设置如图：既可以看到页面效果了。

2. less     创建好vue脚手架后，打开命令行安装less：

   npm install less less-loader --save-dev

        运行成功之后在刚刚和sass同样的style页面修改lang=“scss”为“less”就可以了。

那么如果我单独创建了一个base.scss文件用于设置项目的基本样式，又该如何使用呢？

首先在src下创建一个common文件，我们在里面存放scss文件，base.scss中设置$base-color,然后在刚刚我们的页面中导入：

@import "../common/scss/base";

并注释：

$base-color:red;

刷新页面查看效果。

另外，如果我在common文件中设置了多个scss文件怎么办？总不能在vue文件中一个一个@import导入吧？不用。只需要单独在该文件夹下单独创建一个main.scss文件，里面导入所有的scss文件，然后在需要引入的地方直接导入main.scss就好了