前言

在实际项目中,各种样式往往有很多重复的情况,为了能够使样式的后续开发和维护更加惬意,将这些共同的代码进行命名然后调用这些变量是一个很好的选择。此文介绍如何在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>
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐