vue3中集成sass实现全局scss样式变量

2024-01-07 17:56:25

一、安装sass

npm i sass?
?


二，在style/variable.scss创建一个variable.scss文件

// 给项目提供的scss全局变量
$mycolor:red;
?


三、在vite.config.ts文件配置如下:


export default defineConfig({
? plugins: [
? ? vue(),
? // scss全局变量的一个配置
? css: {
? ? preprocessorOptions: {
? ? ? scss: {
? ? ? ? javascriptEnabled: true,
? ? ? ? additionalData: '@import "./src/styles/variable.scss";',
? ? ? },
? ? },
? },
})

四、可以使用了，在style标签中通过$定义的全局变量名字就可以获取对应的值了

<style scoped lang="scss">

div{

? h1{

? ? color: $color;

? ? size: 60px;

? ? font-size: $fontSize;

? }

}

</style>


?

文章来源:https://blog.csdn.net/weixin_59244784/article/details/135398878
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。