vue-cli中使用sass或者less

忘是亡心i 2022-05-24 08:57 313阅读 0赞

什么是[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文件，会有这两个信息![70][]然后打开任意一个vue文件，在style中设置如图：![70 1][]既可以看到页面效果了。
2.  less     创建好vue脚手架后，打开命令行安装less：
    
        npm install less less-loader --save-dev

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

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

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

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

并注释：

$base-color:red;

刷新页面查看效果。

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

[sass]: http://sass.bootcss.com/
[less]: https://less.bootcss.com/
[70]: https://img-blog.csdn.net/20180524143422616?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nub3dCZWF0UmFpbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220524/5b75c72991074066a59ba6c7f99756e4.png
[70 2]: /images/20220524/00df03595f94403e82bd1c4c96580b87.png
[70 3]: /images/20220524/9ad6da06144e402f99cbfa5a267a7f72.png