前言
在实际项目中,各种样式往往有很多重复的情况,为了能够使样式的后续开发和维护更加惬意,将这些共同的代码进行命名然后调用这些变量是一个很好的选择。此文介绍如何在Vue3项目中全局引入在Scss文件中定义的样式变量。
1. 先安装好scss相关依赖
npm install node-sass -d
npm install sass-loader -d
npm install sass -d
2. 在静态目录下创建相关文件
- 先创建存放全局变量的文件
vars.scss
,里面放入要定义的变量,例如:
$component-bgcolor: #f8f8fa;
- 然后定义一个统一引入所有项目中scss文件的索引文件
index.scss
:
@import './vars.scss';
特别注意:这里由于是scss文件,不需要加上url()将路径包裹起来,不然会报错。
3. 配置项目
打开根目录下的vue.config.js
文件(如果没有就自己创建),然后写入以下代码:
const path = require('path');
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: `@import "./src/assets/scss/index.scss";`,
},
},
}
};
完成以上步骤后,就可以在.vue文件中使用定义好的变量了:
<style lang="scss">
.leftnavigation__wrapper {
grid-area: leftNavigation;
background-color: $component-bgcolor;
}
</style>