Stylance-cli

Stylance-cli是Stylance的构建工具。

它读取您的CSS模块文件，并按以下方式转换：

• 为每个找到的类名添加哈希作为后缀。（.class 将变为 .class-63gi2cY）
• 删除任何 :global(contents) 的实例，同时保留内容不变。

安装

安装stylance cli

cargo install stylance-cli

用法

运行stylance cli

stylance ./path/to/crate/dir/ --output-file ./bundled.scss

第一个参数是包含您的包/库Cargo.toml的目录的路径。

这将找到所有以 .module.scss 和 .module.css 结尾的文件，并将它们打包到 ./bundled.scss 中，所有类都将修改以包含一个与 import_crate_style! 宏生成的哈希匹配的哈希。

生成的 ./bundled.scss

.header-f45126d {
    background-color: red;
}

默认情况下，stylance cli只会在库的 ./src/ 文件夹中查找CSS模块。这可以被 配置。

使用 output-dir 以获得更好的SASS兼容性

如果您计划将stylance的输出用于SASS项目（通过从 .scss 文件导入），则建议使用 output-dir 选项而不是 output-file。

stylance ./path/to/crate/dir/ --output-dir ./styles/

这将创建文件夹 ./styles/stylance/。

当使用 --output-dir（或在 package.metadata.stylance 中的 output_dir）时，stylance 不会打包转换后的模块文件，而是在指定的输出目录路径中创建一个 "stylance" 文件夹，其中包含所有转换后的CSS模块作为单独的文件。

这个“stylance”文件夹还包括一个 _index.scss 文件，该文件导入所有转换后的 scss 模块。

然后您可以使用 @use "path/to/the/folder/stylance" 将 css 模块导入到您的 sass 项目中。

监视更改

在开发过程中，使用 stylance cli 的监视模式很方便。

stylance --watch --output-file ./bundled.scss ./path/to/crate/dir/

然后 stylance 进程将监视任何 .module.css 和 .module.scss 文件的变化，并自动重新构建输出文件。

配置

Stylance 配置位于您 crate 的 Cargo.toml 文件中。

所有配置设置都是可选的。

[package.metadata.stylance]

# output_file
# When set, stylance-cli will bundle all css module files
# into by concatenating them and put the result in this file.
output_file = "./styles/bundle.scss"

# output_dir
# When set, stylance-cli will create a folder named "stylance" inside
# the output_dir directory.
# The stylance folder will be populated with one file per detected css module
# and one _all.scss file that contains one `@use "file.module-hash.scss";` statement
# per module file.
# You can use that file to import all your modules into your main scss project.
output_dir = "./styles/"

# folders
# folders in which stylance cli will look for css module files.
# defaults to ["./src/"]
folders = ["./src/", "./styles/"]

# extensions
# files ending with these extensions will be considered to be
# css modules by stylance cli and will be included in the output
# bundle
# defaults to [".module.scss", ".module.css"]
extensions = [".module.scss", ".module.css"]

# scss_prelude
# When generating an scss file stylance-cli will prepend this string
# Useful to include a @use statement to all scss modules.
scss_prelude = '@use "../path/to/prelude" as *;'

# hash_len
# Controls how long the hash name used in scoped classes should be.
# It is safe to lower this as much as you want, stylance cli will produce an
# error if two files end up with colliding hashes.
# defaults to 7
hash_len = 7

# class_name_pattern
# Controls the shape of the transformed scoped class names.
# [name] will be replaced with the original class name
# [hash] will be replaced with the hash of css module file path.
# defaults to "[name]-[hash]"
class_name_pattern = "my-project-[name]-[hash]"