vue3项目下载完sass依赖后需要配置吗
是的,下载完sass依赖后,还需要进行以下配置:
- 在
vue.config.js文件中添加如下配置:
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `@import "@/assets/styles/_variables.scss";`
}
}
}
}
这个配置的作用是在编译sass文件时,自动加载指定的全局变量文件。
- 在
src/assets/styles目录下创建_variables.scss文件,并在其中定义全局变量,例如:
$primary-color: #1890ff;
$font-size-base: 14px;
这个文件中定义的变量可以在项目中的任何sass文件中使用。
- 在组件中引入sass文件,并使用全局变量,例如:
<template>
<div class="my-component">
<h1 :style="{ color: $primary-color }">Hello World</h1>
</div>
</template>
<style lang="scss">
@import "@/assets/styles/_variables.scss";
.my-component {
font-size: $font-size-base;
}
</style>
这个例子中,$primary-color和$font-size-base变量都是在全局变量文件中定义的,可以在这个组件的sass样式中使用。
原文地址: https://www.cveoy.top/t/topic/buHJ 著作权归作者所有。请勿转载和采集!