迁移者

用法永久链接用法

要使用Sass迁移器，请告诉它要运行哪个迁移以及要迁移哪些Sass文件：

sass-migrator <migration> <entrypoint.scss...>

默认情况下，迁移器将仅更改您在命令行上明确传递的文件。传递该--migrate-deps选项告诉迁移器还更改使用@userule，@forwardrule或@importrule加载的所有样式表。而且，如果您想进行测试以查看将进行哪些更改而不实际保存更改，则可以通过（或简称为“ 通过” ）。--dry-run --verbose-nv

$ cat style.scss
$body-bg: #000;
$body-color: #111;

@import "bootstrap";

@include media-breakpoint-up(sm) {
  .navbar {
    display: block;
  }
}
$ sass-migrator --migrate-deps module style.scss
$ cat style.scss
@use "bootstrap" with (
  $body-bg: #000,
  $body-color: #111
);

@include bootstrap.media-breakpoint-up(sm) {
  .navbar {
    display: block;
  }
}

安装永久链接安装

您可以从安装Dart Sass的大多数相同位置安装Sass迁移器：

独立的固定链接独立的

您可以通过从GitHub下载适用于您操作系统的软件包并将其添加到PATH Windows，Mac或Linux上来安装Sass迁移器。

npm永久链接 npm

如果使用Node.js，还可以 通过运行以下命令使用npm安装Sass迁移器：

npm install -g sass-migrator

Chocolatey固定链接 Chocolatey

如果您使用Windows版Chocolatey软件包管理器，则可以通过运行以下命令来安装Sass迁移器：

choco install sass-migrator

Homebrew永久链接 Homebrew

如果您将Homebrew软件包管理器用于Mac OS X，则可以通过运行以下命令来安装Dart Sass：

brew install sass/sass/migrator

全局选项永久链接全局选项

这些选项适用于所有迁移者。

–migrate-deps永久链接--migrate-deps

此选项（缩写-d）告诉迁移器不仅更改在命令行上显式传递的样式表，还更改它们依赖于使用@userule，@forwardrule或@importrule的任何样式表。

$ sass-migrator module --verbose style.scss
Migrating style.scss
$ sass-migrator module --verbose --migrate-deps style.scss
Migrating style.scss
Migrating _theme.scss
Migrating _fonts.scss
Migrating _grid.scss

–load-path永久链接--load-path

此选项（缩写-I）告诉迁移器一个加载路径，该路径应在其中查找样式表。可以多次传递它以提供多个加载路径。较早的加载路径将优先于较晚的加载路径。

从加载路径加载的依赖关系被假定为第三方库，因此即使 传递了该--migrate-deps选项，迁移器也不会迁移它们。

–干运行永久链接--dry-run

此标志（缩写为-n）告诉迁移器不要将任何更改保存到磁盘。相反，它会打印将要更改的文件列表。通常将此--verbose选项与打印同样要进行的更改内容的选项配对使用。

$ sass-migrator module --dry-run --migrate-deps style.scss
Dry run. Logging migrated files instead of overwriting...

style.scss
_theme.scss
_fonts.scss
_grid.scss

–no-unicode永久链接--no-unicode

该标志告诉Sass迁移器仅向终端发出ASCII字符作为错误消息的一部分。默认情况下，或者如果--unicode通过，则迁移器将为这些消息发出非ASCII字符。该标志不影响CSS  输出。

$ sass-migrator --no-unicode module style.scss
line 1, column 9 of style.scss: Error: Could not find Sass file at 'typography'.
  ,
1 | @import "typography";
  |         ^^^^^^^^^^^^
  '
Migration failed!
$ sass-migrator --unicode module style.scss
line 1, column 9 of style.scss: Error: Could not find Sass file at 'typography'.
  ╷
1 │ @import "typography";
  │         ^^^^^^^^^^^^
  ╵
Migration failed!

–详细的永久链接--verbose

此标志（缩写-v）告诉迁移器将其他信息打印到控制台。默认情况下，它仅打印已更改文件的名称，但与该--dry-run选项结合使用时，它还会打印这些文件的新内容。

$ sass-migrator module --verbose --dry-run style.scss
Dry run. Logging migrated files instead of overwriting...
<==> style.scss
@use "bootstrap" with (
  $body-bg: #000,
  $body-color: #111
);

@include bootstrap.media-breakpoint-up(sm) {
  .navbar {
    display: block;
  }
}
$ sass-migrator module --verbose style.scss
Migrating style.scss

迁移永久迁移

迁移器当前仅支持一次迁移，但是随着Sass语言的不断发展，期望更多迁移！

模块永久链接模块

此迁移将转换使用旧@import规则的样式表以加载依赖关系，以便它们通过@use 规则使用Sass模块系统。它不仅将@imports 天真地更改为@uses，而且还可以智能地更新样式表，使样式表保持以前的工作方式，包括：

• 向其他模块的成员（变量，mixin和函数）的使用添加名称空间。

• 将新@use规则添加到正在使用成员的样式表中，而不导入它们。

• 将覆盖的默认变量转换为with子句。

• 自动删除其他文件中使用的成员的前缀-和_前缀（因为否则它们将被视为私有的，并且只能在声明它们的模块中使用）。

• 将嵌套导入转换为使用meta.load-css()mixin  。

$ cat style.scss
$body-bg: #000;
$body-color: #111;

@import "bootstrap";

@include media-breakpoint-up(sm) {
  .navbar {
    display: block;
  }
}
$ sass-migrator --migrate-deps module style.scss
$ cat style.scss
@use "bootstrap" with (
  $body-bg: #000,
  $body-color: #111
);

@include bootstrap.media-breakpoint-up(sm) {
  .navbar {
    display: block;
  }
}

加载依赖性永久链接加载依赖性

即使未传递--migrate-deps选项，模块迁移器也必须能够读取其迁移所依赖的所有样式表。如果迁移器找不到依赖项，您将得到一个错误。

$ ls .
style.scss  node_modules
$ sass-migrator module style.scss
Error: Could not find Sass file at 'dependency'.
  ,
1 | @import "dependency";
  |         ^^^^^^^^^^^^
  '
  style.scss 1:9  root stylesheet
Migration failed!
$ sass-migrator --load-path node_modules module style.scss

如果在编译样式表时使用加载路径，请确保使用--load-path选项将其传递给迁移器。

不幸的是，该迁移器不支持自定义导入器，但是它确实具有内置的支持，以从URL ~搜索到解析URL的方式node_modules，类似于Webpack支持的那样。

–删除前缀永久链接--remove-prefix

此选项（缩写-p）带有标识符前缀，以在迁移它们时从所有变量，混合和函数名称的开头删除它们。不以此前缀开头的成员将保持不变。

该@import规则将所有顶级成员置于一个全局范围内，因此当这是加载样式表的标准方式时，每个人都被激励在其所有成员名称中添加前缀，以避免意外地重新定义其他样式表。模块系统解决了这个问题，因此自动删除那些不需要的旧前缀很有用。

$ cat style.scss
@import "theme";

@mixin app-inverted {
  color: $app-bg-color;
  background-color: $app-color;
}
$ sass-migrator --migrate-deps module --remove-prefix=app- style.scss
$ cat style.scss
@import "theme";

@mixin inverted {
  color: theme.$bg-color;
  background-color: theme.$color;
}

当您传递此选项时，迁移器还将生成仅导入样式表，该样式表将转发添加了前缀的所有成员，以保留导入库的用户的向后兼容性。

可以多次传递此选项，也可以传递多个值，并用逗号分隔。每个前缀将从具有该前缀的所有成员中删除。如果成员匹配多个前缀，则最长的匹配前缀将被删除。

–转发永久链接--forward

此选项告诉迁移器使用@forward规则转发哪些成员。它支持以下设置：

• none （默认）不会转发任何成员。

• all转发除以原始样式表开头-或_在原始样式表中的成员以外的所有成员，因为在引入模块系统之前，该成员通常用于标记程序包私有成员。

• prefixed仅转发以传递给--remove-prefixoption的前缀开头的成员。该选项只能与该--remove-prefix 选项结合使用。

在命令行上显式传递的所有文件都将转发由那些文件使用@import规则传递加载的成员。使用该--migrate-deps选项加载的文件不会转发任何新成员。当迁移Sass库时，此选项特别有用，因为它确保该库的用户仍将能够访问其定义的所有成员。

$ cat _index.scss
@import "theme";
@import "typography";
@import "components";
$ sass-migrator --migrate-deps module --forward=all style.scss
$ cat _index.scss
@forward "theme";
@forward "typography";
@forward "components";