vue scss引入公用变量

在Vue项目中，我们可以使用SCSS来管理样式。要引入公用变量，首先需要在项目中创建一个公用变量的文件，比如_variables.scss。

在_variables.scss文件中，我们可以定义整个项目的公用变量，比如颜色、字体大小、边距等。例如：

$primary-color: #409eff;
$font-size: 14px;
$margin: 10px;

在需要使用这些公用变量的组件中，我们可以通过import语句引入_variables.scss文件，并使用这些变量。例如，在某个组件的样式中：

<style lang="scss" scoped>
@import "@/styles/_variables.scss";

.container {
  background-color: $primary-color;
  font-size: $font-size;
  margin: $margin;
}
</style>

这样，就可以在.container类中使用公用变量了。当项目中多个组件都需要使用这些公用变量时，只需要在对应的样式文件中引入_variables.scss即可。

需要注意的是，为了正确使用SCSS，我们需要安装sass-loader和node-sass依赖。在项目中通过以下命令安装这些依赖：

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

这样就可以在Vue项目中引入公用变量并使用它们了。同时，通过SCSS的功能，我们还可以使用混合（mixins）和继承（extends）等特性，更好地组织和管理项目的样式。