vue sass 全局引用

全局引用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

页面引用

<style lang="scss" scoped="scoped">
	.homePage{
		width: 100%;
		height: 100%;
		background: $defaultBgColor;
	}
</style>

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

我的页面效果是这样的