全局引用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>
此时页面就会显示对应的颜色
我的页面效果是这样的