0


史上最详细的vite引入scss全局变量详解

我们经常因为某些变量不能全局引入而头疼如麻,尤其是在做一些统一样式的时候,简直是噩梦,而且网上乱七八糟的文章很多很多,但是真正教你配置的没几个,因为很多都是复制过来的,有些人为了赶时间随便复制一下,这里将为你提供史上最详细的引入流程

第一步:创建项目

第二步:在src文件夹下面创建styles文件夹

第三步:创建variables.scss文件作为你使用的全局scss变量

$namespace: v;
$elNamespace: el;

第四步:如果需要跟js/ts交互的话创建global.module.scss,如无需要请忽略

注意:此时命名规则必须为xxx.module.scss,否则在js获取时是一串字符

@import './variables.scss'

:export {
    namespace: $namespace,
    elNamespace: $elNamespace
}

在js/ts中引入

import variables from '@/styles/global.module.scss'

console.log(variables)
// 打印的结果
// {
//    namespace: 'v',
//    elNamespace: 'el'
// }

第五步:在vite.config.ts/vite.config.js中引入

{
  // code
  css: {
      preprocessorOptions: {
        // 全局样式引入
        scss: {
          additionalData: '@import "./src/styles/variables.scss";',
          javascriptEnabled: true
        }
      }
    }
    // code
}
标签: scss 前端 css

本文转载自: https://blog.csdn.net/m0_38085253/article/details/126967511
版权归原作者 菜鸡张大民 所有, 如有侵权,请联系我们删除。

“史上最详细的vite引入scss全局变量详解”的评论:

还没有评论