# @epegzz/sass-vars-loader 中文文档

规范地址：https://npmcn.com/package/%40epegzz/sass-vars-loader/

版本：6\.1\.0
npm 元数据更新时间：2022-06-12T17:38:04.057Z
中文译文更新时间：2026-11-13T19:25:57.035Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40epegzz/sass-vars-loader
原文对照：https://npmcn.com/package/%40epegzz/sass-vars-loader/?lang=original
项目主页：https://github.com/epegzz/sass-vars-loader#readme
源码仓库：https://github.com/epegzz/sass-vars-loader

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：34.1 kB，36 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- Node.js 要求：\>=8
- 运行依赖：3 个
- 首次发布：2016-08-21T17:28:30.323Z
- 最新版本发布：2021-04-05T14:20:56.900Z
- 近 30 天下载量：28412（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：37（近 12 个月 0 个）

## 中文简介

一台用于Webpack的SASS vars装载机. 从JS/JSON/Typescript文件或从Webpack配置装入全球SASS vars.

## 安装

```sh
npm install @epegzz/sass-vars-loader
```

也可以使用：`pnpm add @epegzz/sass-vars-loader`、`yarn add @epegzz/sass-vars-loader`、`bun add @epegzz/sass-vars-loader`

## README

# 萨斯瓦斯装入器

### 从 Webpack 配置或 JSON 文件导入 Sass vars

 [![Travis](https://img.shields.io/travis/epegzz/sass-vars-loader.svg?style=flat-square)](https://travis-ci.org/epegzz/sass-vars-loader)[![Maintainability](https://img.shields.io/codeclimate/maintainability/epegzz/sass-vars-loader.svg?style=flat-square) ](https://codeclimate.com/github/epegzz/sass-vars-loader/maintainability)[![Codecov](https://img.shields.io/codecov/c/github/epegzz/sass-vars-loader.svg?style=flat-square) ](https://codecov.io/gh/epegzz/sass-vars-loader)[![npm version](https://img.shields.io/npm/v/@epegzz/sass-vars-loader.svg?style=flat-square) ](https://www.npmjs.com/package/@epegzz/sass-vars-loader)[![npm installs](https://img.shields.io/npm/dm/@epegzz/sass-vars-loader.svg?style=flat-square) ](https://www.npmjs.com/package/@epegzz/sass-vars-loader)[![dependencies](https://img.shields.io/david/epegzz/sass-vars-loader.svg?style=flat-square)](https://david-dm.org/epegzz/sass-vars-loader)

##### 此加载器允许您使用以下定义的 Sass 变量:

-   QQ JSON 文件
-   QQ JavaScript 文件
-   QQ 在 Webpack 配置

##### 支持两种语法类型 :

-   SAS 语法
-   SCSS 语法

##### 支持热重装 :

-   QQ HMR 已启用
  

## 安装

使用 npm 数据

```sh
npm install @epegzz/sass-vars-loader --save-dev
```

使用线条

```sh
yarn add @epegzz/sass-vars-loader --dev
```

## 使用量

看这个 [示例 Webpack 配置文件](https://npmcn.com/package/%40epegzz/sass-vars-loader/example/webpack.config.js) 看如何使用这个 加载机与 [样式装入器](https://github.com/webpack-contrib/style-loader) 财务报告和审定财务报表 [装弹机](https://github.com/webpack-contrib/css-loader)

### 备选方案1:网络包装配置中的内置Sass vars

```scss
// styles.css:

.some-class {
  background: $greenFromWebpackConfig;
}
```

```js
// webpack.config.js

var path = require('path');

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [{
      test: /\.scss$/,
      use: [
        // Inserts all imported styles into the html document
        { loader: "style-loader" },

        // Translates CSS into CommonJS
        { loader: "css-loader" },

        // Compiles Sass to CSS
        { loader: "sass-loader", options: { includePaths: ["app/styles.scss"] } },

        // Reads Sass vars from files or inlined in the options property
        { loader: "@epegzz/sass-vars-loader", options: {
          syntax: 'scss',
          // Option 1) Specify vars here
          vars: {
            greenFromWebpackConfig: '#0f0'
          }
        }
      }]
    }]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};
```

### 选项2:从 JSON 文件装入 Sass vars

```js
// config/sassVars.json

{
  "purpleFromJSON": "purple"
}
```

```scss
// styles.css:

.some-class {
  background: $purpleFromJSON;
}
```

```js
// webpack.config.js

var path = require('path');

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [{
      test: /\.scss$/,
      use: [
        // Inserts all imported styles into the html document
        { loader: "style-loader" },

        // Translates CSS into CommonJS
        { loader: "css-loader" },

        // Compiles Sass to CSS
        { loader: "sass-loader", options: { includePaths: ["app/styles.scss"] } },

        // Reads Sass vars from files or inlined in the options property
        { loader: "@epegzz/sass-vars-loader", options: {
          syntax: 'scss',
          files: [
            // Option 2) Load vars from JSON file
            path.resolve(__dirname, 'config/sassVars.json')
          ]
        }
      }]
    }]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};
```

### 选项 3: 从 JavaScript 文件装入 Sass vars

```js
// config/sassVars.js

module.exports = {
  blueFromJavaScript: 'blue'
};
```

```scss
// styles.css:

.some-class {
  background: $blueFromJavaScript;
}
```

```js
// webpack.config.js

var path = require('path');

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [{
      test: /\.scss$/,
      use: [
        // Inserts all imported styles into the html document
        { loader: "style-loader" },

        // Translates CSS into CommonJS
        { loader: "css-loader" },

        // Compiles Sass to CSS
        { loader: "sass-loader", options: { includePaths: ["app/styles.scss"] } },

        // Reads Sass vars from files or inlined in the options property
        { loader: "@epegzz/sass-vars-loader", options: {
          syntax: 'scss',
          files: [
            // Option 3) Load vars from JavaScript file
            path.resolve(__dirname, 'config/sassVars.js')
          ]
        }
      }]
    }]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};
```

### Pro Tip: 将物体作为 Sass vars 使用 !

使用 [地图( g)](http://sass-lang.com/documentation/Sass/Script/Functions.html#map_get-instance_method) 用于将对象用作 Sass vars :

```js
// config/sassVars.js

module.exports = {
  lightTheme: {
    background: 'white',
    color: 'black'
  },
  darkTheme: {
    background: 'black',
    color: 'gray'
  }
};
```

```scss
// styles.css:

$theme: $lightTheme;

.some-class {
  background: map_get($theme, background);
  color: map_get($theme, color);
}
```

## 常见问题

### @epegzz/sass-vars-loader 是什么？

一台用于Webpack的SASS vars装载机\. 从JS/JSON/Typescript文件或从Webpack配置装入全球SASS vars\.

### 如何安装 @epegzz/sass-vars-loader？

在项目目录运行 npm install @epegzz/sass-vars-loader，或使用 pnpm add / yarn add / bun add。

### @epegzz/sass-vars-loader 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/epegzz\_\_sass-vars-loader 是否存在。

### @epegzz/sass-vars-loader 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @epegzz/sass-vars-loader 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=8。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @epegzz/sass-vars-loader 可以商用吗？

@epegzz/sass-vars-loader 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @epegzz/sass-vars-loader 的下载量有多少？

根据 npm 官方下载统计，@epegzz/sass-vars-loader 在 2026/10/14 – 2026/11/12 这 30 天内被下载 28,412 次，日均约 947 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @epegzz/sass-vars-loader 还在维护吗？

最新版本 6\.1\.0 发布于 2021/04/05（5 年前）；至今共发布 37 个版本，其中过去 12 个月发布了 0 个；首次发布于 2016/08/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。