vue sass 全局引用

向右看齐 2023-02-13 03:39 6阅读 0赞

## 全局引用scss ##

在使用的过程中,我们有一些固有的颜色字体等等,需要整个网页都统一的,所以  
需要放在全局,页面需要使用的时候直接调用即可.  
当然也可以使用公共类的方式进行引入样式  
但是更加推荐scss的变量方式,这样不管是字体还是背景,只要是同样颜色的地方都可以直接调用改变量就能达到想要的效果  
这也使得class名称没有那么多,也避免了取名难的问题

## 引入scss ##

首先要先引入scss,不然无法使用

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

我的是创建项目的时候就已经添加了这个插件,所以所有的配置都有了,如果安装了不能用,请查看相应的环境配置问题

安装好了之后在创建 vue.config.js 文件,如果这文件在你项目的根目录下面已经存在则不用创建

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

如果有报错,不妨将 prependData,改成data试试

*  注意: import 后面是我们创建的公共scss文件的位置

### scss文件 ###

// 默认背景颜色
    $defaultBgColor:#409EFF

### 页面引用 ###

此时页面就会显示对应的颜色

我的页面效果是这样的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200527094856560.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA==,size_16,color_FFFFFF,t_70