vue3项目之sass 的使用方法

sass 的使用方法

sass 帮助我们集中式管理 css 样式

下载依赖：npm i sass -D 注意是 SASS ！！！

使用文档：https://blog.csdn.net/weixin_67745264/article/details/125141904

特性：index.scss

// 定义变量
$red: red;

// 定义函数（css 集中样式）
@mixin background-black {
    background-color: black;
}

组件中使用

<style lang="scss" scoped>
@import "@/assets/scss/app/index.scss";

div {
    width: 100px;
    height: 200px;
    color: $red;
    @include background-black;
}   
</style>

将某个 scss 文件注册为全局

在 assets 下新建 variable.scss ，里面存放项目全局样式

在 vite.config.ts 中添加配置

// 配置 scss 入口文件
css: {
    preprocessorOptions: {
        scss: {
            additionalData: `@import "@/assets/scss/variable.scss";`
        }
    }
},

之后其他 scss 文件就不用引入 variable.scss 了