记录一个简单的全局引入scss(函数、变量、混合器)文件的问题

当我们直接在入口文件中引入资源文件发现,在其他scss文件中无法直接使用,还需要单独去引入一次;

为什么需要这样配置而不能在入口文件中直接引入呢?

这是因为 SCSS 的变量、函数或者混合器等内容是在编译阶段被解析的,而不是在运行时。因此,如果你想要在样式文件中使用这些内容,就需要在编译阶段将这些内容注入到每个样式文件中。
而在入口文件中引入 SCSS 文件只是将这些样式文件导入到项目中,而并不会在编译阶段将 SCSS 文件中的内容注入到每个样式文件中。
因此,如果你想要在每个样式文件中直接使用 SCSS 文件中定义的变量、函数或者混合器,就需要通过 Vite 配置项 或者webpack配置项来实现。
vite
javascript 复制代码
css: {
      //全局配置utils.scss
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@/assets/style/centn/modules/util.scss";`,
        },
      },
    }
webpack
javascript 复制代码
{
      test: /\.(css|scss|sass)$/,
      use: [
        !prodMode
          ? 'style-loader'
          : {
              loader: MiniCssExtractPlugin.loader,
              options: {
                publicPath: '../'
              }
            },
        'css-loader',
        'postcss-loader',
        'sass-loader',
        {
          loader: 'sass-resources-loader',
          options: {
            resources: [
              'src/style/var.scss' 
            ]
          }
        }
      ]
    }
或者像vue-cli中
javascript 复制代码
css: {
      loaderOptions: {
        scss: {
            prependData: `@import "@/style/var.scss";`
        },
      }
    }

这意味着,你在 此配置项中引入的 SCSS 文件中定义的变量、函数或者混合器等内容都可以在项目中的任何样式文件中直接使用,而无需在每个样式文件中单独引入。

相关推荐
EricWang13586 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning6 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人16 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂38 分钟前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程1 小时前
【前端基础】CSS基础
前端·css
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫1 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
Justinc.2 小时前
CSS3新增边框属性(五)
前端·css·css3
fruge2 小时前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3