@amoo-miki/sass-loader

中文文档

10.4.1-node-sass-9.0.0-libsass-3.6.5-with-sass-embedded.rc1发布于 2023/10/19MITCommonJS近 30 天下载 3万

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

文档目录14 节

开始
解决 import 规则
问题 url(...)
选项
implementation
sassOptions
sourceMap
additionalData
webpackImporter
实例
将 CSS 提取到单独的文件中
原始地图
捐款
许可证

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

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

这是叉子 [email protected] 用于支持 node-sass@9 并主要创建用于 @amoo-miki/[email protected]。。。 .

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

"devDependencies": {
  "node-sass": "npm:@amoo-miki/[email protected]",
  "sass-loader": "npm:@amoo-miki/[email protected]"
}

开始

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

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

sass-loader 需要您安装任一达特萨斯或者说节点萨斯文档.

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

我们建议使用达特萨斯。。。 .

⚠ 节点萨斯不与亚恩·平普特性.

链条 sass-loader 与装弹机编辑样式装入器对 DOM 或微型 cs- 提取插件把它提取到一个单独的文件中.

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

应用程序.js

import "./style.scss";

样式.cs

$body-color: red;

body {
  color: $body-color;
}

网络包装. config.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` 规则

网页包提供解决文件的高级机制。。。 .

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

@import "~bootstrap";

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

问题 `url(...)`

由于萨斯的执行不提供 url 重写,所有关联资产必须相对输出.

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

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

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

使用解析器放在前面 sass-loader 在装载链.
库作者通常提供一个变量来修改资产路径. 鞋带屁股例如,有一个 $icon-font-path。。。 .

选项

名称	类型	默认	说明
`implementation`	`{Object}`	`sass`	设置 Sass 执行供使用 .
`sassOptions`	`{Object\|Function}`	sass 执行的默认值	Sass的选项.
`sourceMap`	`{Boolean}`	`compiler.devtool`	启用/ 无法生成源地图 .
`additionalData`	`{String\|Function}`	`undefined`	预付/附录 `Sass`编号 :`SCSS` 在实际条目文件之前输入代码.
`webpackImporter`	`{Boolean}`	`true`	启用/ 禁用默认 Webpack 导入器 .

`implementation`

类型 : Object 默认 : sass

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

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

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

软件包.json

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

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

软件包.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 作为模块.

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

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, (中文(简体) ), 同步编译速度是同步编译速度的两倍 默认情况下,由于同步回调的间接费用. 为了避免这种头顶,你可以使用纤维从同步代码路径调用同步导入器的软件包.

我们自动注射 fibers 软件包(设置) sassOptions.fiber用于 Node.js 如果可能,则减去v16.0.0(即需要安装 fibers 软件包).

纤维不兼容 Node.js v16.0.0 或较晚(参见导言来读我) (中文(简体) ).

软件包.json

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

您可以禁用自动插入 fibers 通过一个 false 数值 sassOptions.fiber 选项.

网络包装. config.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

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 执行的默认值

备选方案达特萨斯或者说节点萨斯执行.

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

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

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

i️ 访问装入器上下文在自定义导入器内可以使用 this.webpackLoaderContext 属性.

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

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

达特萨斯文档用于所有可用项目 sass 选项.
节点 Sass 文档用于所有可用项目 node-sass 选项.

`Object`

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

网络包装. config.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 执行 .

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 选项. 所有值启用源映射生成, 但 eval 财务报告和审定财务报表 false 数值.

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

网络包装. config.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

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`

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`

同步

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;
              },
            },
          },
        ],
      },
    ],
  },
};

自动同步

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) (中文(简体) ).

网络包装. config.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- 提取插件 (使用此选项, 当使用 Webpack 4 配置。) 在所有使用中发挥作用)
提取器 (操作器,但专门处理css-loader的输出)

网络包装. config.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

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文件, 有个很好的博客文章复选测试/源代码映射是一个运行中的例子.

捐款

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

捐款

许可证

麻省理工学院

版本与发布记录

@amoo-miki/sass-loader 共发布 3 个版本，首次发布于 2023/08/02；过去 12 个月发布了 0 个版本。

版本	发布日期	距今
`10.4.1-node-sass-9.0.0-libsass-3.6.5-with-sass-embedded.rc1`latest	2023/10/19	3 年前
`10.4.1-node-sass-9.0.0-libsass-3.6.5`	2023/08/02	3 年前
`10.4.1`	2023/08/02	3 年前

关于 @amoo-miki/sass-loader 的常见问题

@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 和提交记录判断。

npm install @amoo-miki/sass-loader

pnpmpnpm add @amoo-miki/sass-loader
yarnyarn add @amoo-miki/sass-loader
bunbun add @amoo-miki/sass-loader

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

npm 7+ 与 pnpm 8+ 会自动安装必需的 peer 依赖，Yarn 需手动安装。

在你的项目目录中运行此命令。

近 30 天下载

29,663

约 3万次日均 989 次

统计周期 2026/10/06 – 2026/11/04
数据来自 npm 官方下载统计，今天更新

最新版本10.4.1-node-sass-9.0.0-libsass-3.6.5-with-sass-embedded.rc1发布于 3 年前

开源许可MIT宽松许可

包体积47.2 kB8 个文件 · 解压后

运行依赖5 个另有 5 个 peer 依赖

模块格式CommonJS

TypeScript未声明类型可查找 @types/amoo-miki__sass-loader

Node.js>= 10.13.0

发布版本3 个近 12 个月 0 个

首次发布2023/08/023 年前

元数据更新2023/10/19

每一个软件包背后，
都有分享与创造的人。

@amoo-miki/sass-loader

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

开始

解决 import 规则

问题 url(...)

选项

implementation

sassOptions

Object

Function

sourceMap

additionalData

String

Function

同步

自动同步

webpackImporter

实例

将 CSS 提取到单独的文件中

原始地图

捐款

许可证

版本与发布记录

关于 @amoo-miki/sass-loader 的常见问题

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

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

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

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

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

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

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

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

解决 `import` 规则

问题 `url(...)`

`implementation`

`sassOptions`

`Object`

`Function`

`sourceMap`

`additionalData`

`String`

`Function`

`webpackImporter`