如何实现SCSS函数全局引用，无需每次新建文件时导入？

有几种实用的方法可以实现全局引用util/functions.scss，不用每次新建文件都手动加@use "util/functions" as *;：

1. 通过构建工具自动注入（推荐） #

这是最省心的方案，借助构建工具的配置，自动在每个SCSS文件开头插入导入语句。

Webpack 配置示例 #

修改webpack.config.js：

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              // 自动插入导入语句，注意路径要和项目结构匹配
              additionalData: `@use "./util/functions" as *;`,
            },
          },
        ],
      },
    ],
  },
};

Vite 配置示例 #

修改vite.config.js：

import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // 路径根据项目实际位置调整
        additionalData: `@use "./util/functions" as *;`,
      },
    },
  },
})

Parcel 配置示例 #

在项目根目录的package.json中添加：

{
  "sass": {
    "additionalData": "@use './util/functions' as *;"
  }
}

2. 统一入口文件导入 #

创建一个全局SCSS文件（比如globals.scss），在里面导入函数：

// globals.scss
@use "util/functions" as *;
// 还可以在这里添加其他全局样式、变量等

之后所有新建的SCSS文件只需要导入这个全局文件即可：

@use "./globals" as *;

这种方式虽然还是需要导入，但只需要写一次全局文件的导入，不用每次都单独引用函数文件。

3. 使用SCSS的@forward做模块化转发 #

如果你的项目是模块化结构，可以在一个公共模块文件中转发函数：

// utils/index.scss
@forward "functions";

之后其他文件可以通过引用这个公共模块来使用函数：

@use "./utils" as *;

这种方式适合组件库或大型项目的模块化管理，但还是需要每个文件引用公共模块，不如构建工具注入直接。

内容的提问来源于stack exchange，提问作者Clytax