如何在vue组件中使用less变量？

Question

我已经将.less文件导入到vue组件中，但它仍然给我一个错误。

我在

base.less

下的

assets/less

中定义变量。

@font-face {
  font-family: 'Poppins';
  src: url(../fonts/Poppins-Regular.ttf);
  font-weight: normal;
  font-style: normal;
}

@button-bg-color: #809c2c;
@button-bg-color-hover: #99b056;
@button-border-radius: 7px;
@button-font: 'Poppins';

并将其导入到

App.vue

。

<style lang="less" scoped>
@import './assets/less/main.less';

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2em;

  .header-title-nav {
    width: 60%;
  
    display: flex;
    align-items: center;
    justify-content: space-between;

    i {
      width: 6.25em;
      height: 6.25em;
    }

    .logo {
      width: 100%;
      height: 100%;
    
      cursor: pointer;
    }
  }

  .header-btn {
    background-color: @button-bg-color;
    border-radius: .5em;
    width: 12.5em;
    height: 7.8125em;
    text-decoration: none;
    color: white;
    font-size: .8em;
    font-weight: 600;

    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
      background-color: #99b056;
    }
  }
}
</style>

VScode 中

.header-btn

下的行中出现的错误消息是预期的属性值。

我安装了less，变量可以在main.less中使用。

还有其他人遇到同样的问题，只需添加一条 import 语句即可解决，但对我来说没有用。

Answer 1

您在

base.less

中设置变量并包含

main.less

...
另外，如果您使用

vite

，并且希望

less

变量在所有组件中可用，请在

vite.config.ts

中设置：

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        additionalData: '@import "@/assets/less/variables.less";',
      },
    },
  },
})