下载依赖包
yarn add -D less less-loader
安装完之后就可以在代码中使用 less 编码了
<style lang="less" scoped>
.about {
min-height: 100vh;
.header {
color: red;
font-size: 3rem;
border: 1px solid @border-color;
border-radius: @border-radius;
}
}
</style>
上面代码中使用了 less 变量，但是文件中并没有引入，这是怎么做到的呢？
进行如下配置即可
export default defineConfig({
plugins: [
Vue()
],
// 其他配置项
css: {
preprocessorOptions: {
less: {
additionalData: '@import "../src/assets/variables.less";'
}
}
}
})
上面 additionalData 的路径是存放 less 变量的文件路径。
这里就相当于全局引入了，不需要在每个用到变量的地方引入。