# @amoo-miki/sass-loader 中文文档

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

版本：10\.4\.1-node-sass-9\.0\.0-libsass-3\.6\.5-with-sass-embedded\.rc1
npm 元数据更新时间：2023-10-18T19:19:59.662Z
中文译文更新时间：2026-11-06T01:02:42.065Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40amoo-miki/sass-loader
原文对照：https://npmcn.com/package/%40amoo-miki/sass-loader/?lang=original
项目主页：https://github.com/AMoo-Miki/sass-loader
源码仓库：https://github.com/webpack-contrib/sass-loader

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

- 包体积（解压后）：47.2 kB，8 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- Node.js 要求：\>= 10\.13\.0
- 运行依赖：5 个
- peer 依赖：fibers \>= 3\.1\.0，node-sass ^4\.0\.0 \|\| ^5\.0\.0 \|\| ^6\.0\.0 \|\| ^7\.0\.0 \|\| ^8\.0\.0 \|\| ^9\.0\.0，sass ^1\.3\.0，sass-embedded ^1\.66\.1，webpack ^4\.36\.0 \|\| ^5\.0\.0
- 首次发布：2023-08-01T23:48:26.474Z
- 最新版本发布：2023-10-18T19:19:59.452Z
- 近 30 天下载量：29663（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 0 个）

## 中文简介

用于网络包装的垃圾装载器

## 安装

```sh
npm install @amoo-miki/sass-loader
```

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

## README

# @amoo-miki/sass-loader (英语)

装入 Sass/SCSS 文件并将其编译为 CSS.

这是叉子 [`sass-loader@10.4.1`](https://github.com/webpack-contrib/sass-loader/releases/tag/v10.4.1) 用于支持 `node-sass@9` 并主要创建用于 [`@amoo-miki/node-sass@9.0.0-libsass-3.6.5`](https://www.npmjs.com/package/@amoo-miki/node-sass)。 。 。 .

最容易使用的方法是更新 `package.json` 改为:

```json
"devDependencies": {
  "node-sass": "npm:@amoo-miki/node-sass@9.0.0-libsass-3.6.5",
  "sass-loader": "npm:@amoo-miki/sass-loader@10.4.1-node-sass-9.0.0-libsass-3.6.5"
}
```

## 开始

开始,你需要安装 `sass-loader`数字 :

```console
npm install sass-loader sass webpack --save-dev
```

`sass-loader` 需要您安装任一 [达特萨斯](https://github.com/sass/dart-sass) 或者说 [节点萨斯](https://github.com/sass/node-sass) 文档.

这使得您可以控制您所有依赖的版本,并选择使用哪个 Sass 执行 .

> 我们建议使用 [达特萨斯](https://github.com/sass/dart-sass)。 。 。 .

> ⚠ [节点萨斯](https://github.com/sass/node-sass) 不与 [亚恩·平普](https://classic.yarnpkg.com/en/docs/pnp/) 特性.

链条 `sass-loader` 与 [装弹机](https://github.com/webpack-contrib/css-loader) 编辑 [样式装入器](https://github.com/webpack-contrib/style-loader) 对 DOM 或 [微型 cs- 提取插件](https://github.com/webpack-contrib/mini-css-extract-plugin) 把它提取到一个单独的文件中.

然后将加载器添加到您的 Webpack 配置中. 例如:

**应用程序.js**

```js
import "./style.scss";
```

**样式.cs**

```scss
$body-color: red;

body {
  color: $body-color;
}
```

**网络包装. config.js**

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
    ],
  },
};
```

终于跑 `webpack` 通过你喜欢的方法.

### 解决 `import` 规则

网页包提供 [解决文件的高级机制](https://webpack.js.org/concepts/module-resolution/)。 。 。 .

这个 `sass-loader` 使用 Sass 的自定义导入器特性将所有查询传递给 Webpack 解析引擎. 因此,您可以导入您的 Sass 模块 `node_modules`把它们放在 `~` 告诉 Webpack 这不是一个相对导入 :

```scss
@import "~bootstrap";
```

这很重要,只用预留 `~`,因为 `~/` 解析到主目录. 网络包装需要区分 `bootstrap` 财务报告和审定财务报表 `~bootstrap` 因为CSS和Sass文件没有用于导入相对文件的特殊语法. 写入 `@import "style.scss"` 与 `@import "./style.scss";`

### 问题 `url(...)`

由于萨斯的执行不提供 [url 重写](https://github.com/sass/libsass/issues/532),所有关联资产必须相对输出.

-   如果您将生成的 CSS 传递到 `css-loader`,所有urls必须相对于条目文件(例如. `main.scss`) (中文(简体) ).
-   如果你只是生成CSS而不传递给 `css-loader`,必须相对于您的网络根.

这第一期会打乱你的 自然,期望相对参照问题得到解决 `.sass`编号 :`.scss` 指定它们的文件(如正则文件) `.css` 文档).

值得庆幸的是,这一问题有两个解决办法:

-   使用 [解析器](https://github.com/bholloway/resolve-url-loader)放在前面 `sass-loader` 在装载链.
-   库作者通常提供一个变量来修改资产路径. [鞋带屁股](https://github.com/twbs/bootstrap-sass) 例如,有一个 `$icon-font-path`。 。 。 .

## 选项

| 名称 | 类型 | 默认 | 说明 |
| :-: | :-: | :-: | :-- |
| **[`implementation`](https://npmcn.com/package/%40amoo-miki/sass-loader/#readme-implementation)** | `{Object}` | `sass` | 设置 Sass 执行供使用 . |
| **[`sassOptions`](https://npmcn.com/package/%40amoo-miki/sass-loader/#readme-sassoptions)** | `{Object|Function}` | sass 执行的默认值 | Sass的选项. |
| **[`sourceMap`](https://npmcn.com/package/%40amoo-miki/sass-loader/#readme-sourcemap)** | `{Boolean}` | `compiler.devtool` | 启用/ 无法生成源地图 . |
| **[`additionalData`](https://npmcn.com/package/%40amoo-miki/sass-loader/#readme-additionaldata)** | `{String|Function}` | `undefined` | 预付/附录 `Sass`编号 :`SCSS` 在实际条目文件之前输入代码. |
| **[`webpackImporter`](https://npmcn.com/package/%40amoo-miki/sass-loader/#readme-webpackimporter)** | `{Boolean}` | `true` | 启用/ 禁用默认 Webpack 导入器 . |

### `implementation`

类型 : `Object` 默认 : `sass`

特别节目 `implementation` 选项决定要使用哪个 Sass 执行.

默认情况下, 加载器根据您的依赖性解决执行 . 只要添加所需的执行到 `package.json` (单位:千美元)`sass` 或者说 `node-sass` 软件包)和安装依赖.

示例 `sass-loader` 加载器使用 `sass` (单位:千美元)`dart-sass`执行:

**软件包.json**

```json
{
  "devDependencies": {
    "sass-loader": "^7.2.0",
    "sass": "^1.22.10"
  }
}
```

示例 `sass-loader` 加载器使用 `node-sass` 执行:

**软件包.json**

```json
{
  "devDependencies": {
    "sass-loader": "^7.2.0",
    "node-sass": "^5.0.0"
  }
}
```

当心情况 `node-sass` 财务报告和审定财务报表 `sass` 已经安装了! 默认情况下 `sass-loader` 首选 `sass`。 。 。 . 为了避免这种情况,你可以使用 `implementation` 选项.

这个 `implementation` 选项或接受 `sass` (单位:千美元)`Dart Sass`)或(或) `node-sass` 作为模块.

比如说,用达特·萨斯,你会通过:

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              // Prefer `dart-sass`
              implementation: require("sass"),
            },
          },
        ],
      },
    ],
  },
};
```

注意当使用时 `sass` (单位:千美元)`Dart Sass`, (中文(简体) ), **同步编译速度是同步编译速度的两倍** 默认情况下,由于同步回调的间接费用. 为了避免这种头顶,你可以使用 [纤维](https://www.npmjs.com/package/fibers) 从同步代码路径调用同步导入器的软件包.

我们自动注射 [`fibers`](https://github.com/laverdet/node-fibers) 软件包(设置) `sassOptions.fiber`用于 `Node.js` 如果可能,则减去v16.0.0(即需要安装 [`fibers`](https://github.com/laverdet/node-fibers) 软件包).

> 纤维不兼容 `Node.js` v16.0.0 或较晚([参见导言来读我](https://github.com/laverdet/node-fibers)) (中文(简体) ).

**软件包.json**

```json
{
  "devDependencies": {
    "sass-loader": "^7.2.0",
    "sass": "^1.22.10",
    "fibers": "^4.0.1"
  }
}
```

您可以禁用自动插入 [`fibers`](https://github.com/laverdet/node-fibers) 通过一个 `false` 数值 `sassOptions.fiber` 选项.

**网络包装. config.js**

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              implementation: require("sass"),
              sassOptions: {
                fiber: false,
              },
            },
          },
        ],
      },
    ],
  },
};
```

你也可以通过 `fiber` 使用此代码的值 :

**网络包装. config.js**

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              implementation: require("sass"),
              sassOptions: {
                fiber: require("fibers"),
              },
            },
          },
        ],
      },
    ],
  },
};
```

### `sassOptions`

类型 : `Object|Function` 默认: Sass 执行的默认值

备选方案 [达特萨斯](http://sass-lang.com/dart-sass) 或者说 [节点萨斯](https://github.com/sass/node-sass) 执行.

> 我... 这.. `indentedSyntax` 选项有 `true` 数值 `sass` 扩展名.

> iQQ 等选项 `data` 财务报告和审定财务报表 `file` 无法使用,将被忽略.

> 我们建议不要设置 `outFile`, (中文(简体) ), `sourceMapContents`, (中文(简体) ), `sourceMapEmbed`, (中文(简体) ), `sourceMapRoot` 选项因为 `sass-loader` 当 `sourceMap` 选项 `true`。 。 。 .

> i️ 访问 [装入器上下文](https://webpack.js.org/api/loaders/#the-loader-context) 在自定义导入器内可以使用 `this.webpackLoaderContext` 属性.

两者略有不同 `sass` (单位:千美元)`dart-sass`和 `node-sass` 选项.

在使用文件前请查阅文件:

-   [达特萨斯文档](https://github.com/sass/dart-sass#javascript-api) 用于所有可用项目 `sass` 选项.
-   [节点 Sass 文档](https://github.com/sass/node-sass/#options) 用于所有可用项目 `node-sass` 选项.

#### `Object`

Sass 执行设置的使用和对象 .

**网络包装. config.js**

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              sassOptions: {
                indentWidth: 4,
                includePaths: ["absolute/path/a", "absolute/path/b"],
              },
            },
          },
        ],
      },
    ],
  },
};
```

#### `Function`

通过基于加载器上下文设置不同的选项来设置 Sass 执行 .

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              sassOptions: (loaderContext) => {
                // More information about available properties https://webpack.js.org/api/loaders/
                const { resourcePath, rootContext } = loaderContext;
                const relativePath = path.relative(rootContext, resourcePath);

                if (relativePath === "styles/foo.scss") {
                  return {
                    includePaths: ["absolute/path/c", "absolute/path/d"],
                  };
                }

                return {
                  includePaths: ["absolute/path/a", "absolute/path/b"],
                };
              },
            },
          },
        ],
      },
    ],
  },
};
```

### `sourceMap`

类型 : `Boolean` 默认: 取决于 `compiler.devtool` 价值

启用/ 无法生成源地图 .

默认生成源地图取决于 [`devtool`](https://webpack.js.org/configuration/devtool/) 选项. 所有值启用源映射生成, 但 `eval` 财务报告和审定财务报表 `false` 数值.

> i 如为 `true` 页:1 `sourceMap`, (中文(简体) ), `sourceMapRoot`, (中文(简体) ), `sourceMapEmbed`, (中文(简体) ), `sourceMapContents` 财务报告和审定财务报表 `omitSourceMapUrl` 从 `sassOptions` 将被忽略.

**网络包装. config.js**

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
            },
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true,
            },
          },
        ],
      },
    ],
  },
};
```

> i 在一些罕见的情况下 `node-sass` 可以输出无效的源地图( 是一个) `node-sass` 错误).

> > 为了避免这种情况,你可以尝试更新 `node-sass` 到最新版本或您可以尝试在其中设置 `sassOptions` 页:1 `outputStyle` 选项到 `compressed`。 。 。 .

**网络包装. config.js**

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              sourceMap: true,
              sassOptions: {
                outputStyle: "compressed",
              },
            },
          },
        ],
      },
    ],
  },
};
```

### `additionalData`

类型 : `String|Function` 默认 : `undefined`

预付 `Sass`编号 :`SCSS` 在实际条目文件之前输入代码. 在这种情况下 `sass-loader` 将不会覆盖 `data` 选项,但只是 **预选** 该条目的内容.

当您的一些 Sass 变量依赖于环境时, 这一点特别有用 :

#### `String`

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              additionalData: "$env: " + process.env.NODE_ENV + ";",
            },
          },
        ],
      },
    ],
  },
};
```

#### `Function`

##### 同步

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              additionalData: (content, loaderContext) => {
                // More information about available properties https://webpack.js.org/api/loaders/
                const { resourcePath, rootContext } = loaderContext;
                const relativePath = path.relative(rootContext, resourcePath);

                if (relativePath === "styles/foo.scss") {
                  return "$value: 100px;" + content;
                }

                return "$value: 200px;" + content;
              },
            },
          },
        ],
      },
    ],
  },
};
```

##### 自动同步

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              additionalData: async (content, loaderContext) => {
                // More information about available properties https://webpack.js.org/api/loaders/
                const { resourcePath, rootContext } = loaderContext;
                const relativePath = path.relative(rootContext, resourcePath);

                if (relativePath === "styles/foo.scss") {
                  return "$value: 100px;" + content;
                }

                return "$value: 200px;" + content;
              },
            },
          },
        ],
      },
    ],
  },
};
```

### `webpackImporter`

类型 : `Boolean` 默认 : `true`

启用/ 禁用默认 Webpack 导入器 .

这在某些情况下可以改善业绩。 谨慎使用它 因为别名和 `@import` 从规则开始 `~` 没用的. 你可以通过自己的 `importer` 以解决这一问题(见 [`importer docs`](https://github.com/sass/node-sass#importer--v200---experimental)) (中文(简体) ).

**网络包装. config.js**

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              webpackImporter: false,
            },
          },
        ],
      },
    ],
  },
};
```

## 实例

### 将 CSS 提取到单独的文件中

对于生产建设,建议从您的捆绑中提取CSS,以便日后能够同时使用CSS/JS资源.

从捆绑中取出样式表有两种可能性:

-   [微型 cs- 提取插件](https://github.com/webpack-contrib/mini-css-extract-plugin) (使用此选项, 当使用 Webpack 4 配置 。) 在所有使用中发挥作用)
-   [提取器](https://github.com/peerigon/extract-loader) (操作器,但专门处理css-loader的输出)

**网络包装. config.js**

```js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // fallback to style-loader in development
          process.env.NODE_ENV !== "production"
            ? "style-loader"
            : MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader",
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css",
    }),
  ],
};
```

### 原始地图

启用/ 无法生成源地图 .

要启用 CSS 源地图, 您需要通过 `sourceMap` 选项 `sass-loader` _财务报告和审定财务报表_ 装弹手.

**网络包装. config.js**

```javascript
module.exports = {
  devtool: "source-map", // any "source-map"-like devtool is possible
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
            },
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true,
            },
          },
        ],
      },
    ],
  },
};
```

如果你想编辑Chrome内部原始的Sass文件, [有个很好的博客文章](https://medium.com/@toolmantim/getting-started-with-css-sourcemaps-and-in-browser-sass-editing-b4daab987fb0)复选 [测试/源代码映射](https://github.com/webpack-contrib/sass-loader/tree/master/test) 是一个运行中的例子.

## 捐款

请花点时间来读一下我们的贡献准则 如果你还没有这样做.

[捐款](https://npmcn.com/package/%40amoo-miki/sass-loader/.github/CONTRIBUTING.md)

## 许可证

[麻省理工学院](https://npmcn.com/package/%40amoo-miki/sass-loader/LICENSE)

## 常见问题

### @amoo-miki/sass-loader 是什么？

用于网络包装的垃圾装载器

### 如何安装 @amoo-miki/sass-loader？

在项目目录运行 npm install @amoo-miki/sass-loader，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：webpack（^4\.36\.0 \|\| ^5\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @amoo-miki/sass-loader 支持 TypeScript 吗？

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

### @amoo-miki/sass-loader 支持 ESM 还是 CommonJS？

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

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

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

### @amoo-miki/sass-loader 可以商用吗？

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

### @amoo-miki/sass-loader 的下载量有多少？

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

### @amoo-miki/sass-loader 还在维护吗？

最新版本 10\.4\.1-node-sass-9\.0\.0-libsass-3\.6\.5-with-sass-embedded\.rc1 发布于 2023/10/19（3 年前）；至今共发布 3 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/08/02。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。