VUE3配置sass、less全局变量

less配置流程和sass一致，把文中的scss换成less即可，less中变量定义为：@params-name

安装 sass sass-loader

定义样式全局变量

在style/variable.scss创建一个variable.scss文件,并定义全局变量

$common-color:red

项目中引入全局变量$

在style/variable.scss创建一个variable.scss文件，并在vite.config.ts文件配置如下

export default defineConfig((config) => {
	css: {
      preprocessorOptions: {
        scss: {
          javascriptEnabled: true,
            // import语句后面的;不能省略，不然全局样式不生效
          additionalData: '@import "./src/styles/variable.scss";',
        },
      },
    },
	}
}

在组件中使用全局变量

<style lang="scss" scoped>
div{
  color:$common-color
}
style>