记录一个简单的全局引入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 文件中定义的变量、函数或者混合器等内容都可以在项目中的任何样式文件中直接使用,而无需在每个样式文件中单独引入。

相关推荐
G_GreenHand11 分钟前
Dhtmlx Gantt教程
前端
鹿九巫12 分钟前
【CSS】层叠,优先级与继承(四):层叠,优先级与继承的关系
前端·css
卓怡学长14 分钟前
w304基于HTML5的民谣网站的设计与实现
java·前端·数据库·spring boot·spring·html5
宝拉不想努力了16 分钟前
vue element使用el-table时,切换tab,table表格列项发生错位问题
前端·vue.js·elementui
YONG823_API21 分钟前
深度探究获取淘宝商品数据的途径|API接口|批量自动化采集商品数据
java·前端·自动化
鱼樱前端21 分钟前
前端必知必会:JavaScript 对象与数组克隆的 7 种姿势,从浅入深一网打尽!
前端·javascript
小希爸爸1 小时前
1、中医基础入门和养生
前端·后端
神仙别闹2 小时前
基于VUE+Node.JS实现(Web)学生组队网站
前端·vue.js·node.js
下雨的Jim2 小时前
前端速成之——Script
前端·笔记
Captaincc2 小时前
使用 Copilot 代理模式构建着陆页
前端·ai编程·github copilot