README

Magento 2 - Sass 预处理器模块

在静态内容部署期间使用额外的 Gulp 工作流程来提高 Magento 2 开发速度的 Sass 处理模块。它使用 scssphp 编译 SCSS，并处理标准的 @import 指令以及 @magento_import。

安装

1. 通过 composer 安装模块 composer require clawrock/magento2-sass-preprocessor
2. 注册模块 php bin/magento setup:upgrade
3. 使用 php bin/magento setup:static-content:deploy -f 编译 Sass 主题

示例主题

• clawrock/magento2-theme-blank-sass

兼容性

预处理器

• Magento 2.2 - 2.3
• PHP 7.0 - 7.2

Gulp

• Node.js 10+

Gulp

1. 安装 Node.js
2. 安装 Gulp 配置 php bin/magento dev:gulp:install
3. 安装 Gulp 和所需依赖 npm install
4. 定义主题配置 php bin/magento dev:gulp:theme
5. 将主题符号链接到 pub/static 文件夹 gulp exec:[theme_key]
6. 编译 SCSS gulp scss:[theme_key]
7. 监视更改 gulp watch:[theme_key]

它还支持 LESS，可以使用 less 替代 SCSS，使用 gulp less:[theme_key]

使用附加标志来启用更多监视器

• --phtml: 当 phtml 文件更改时重新加载
• --js: 当 js 文件更改时重新加载

配置主题

您可以像在 Magento 随附的 Gruntfile 中一样手动配置主题，或者使用 php bin/magento dev:gulp:theme 命令来自动配置。

参考: Grunt 配置文件

命令

gulp 命令列表

• gulp clean:[theme_key]
• gulp deploy:[theme_key]
• gulp exec:[theme_key]
• gulp scss:[theme_key]
• gulp less:[theme_key]
• gulp watch:[theme_key]
• gulp build:scss:[theme_key]
• gulp build:less:[theme_key]
• gulp dev:scss:[theme_key]
• gulp dev:less:[theme_key]

BrowserSync

将 --proxy http://magento.test 参数传递给 gulp watch:[theme_key] 或 gulp dev:scss[theme_key]，其中 http://magento.test 是 Magento 基础 URL，BrowserSync 将被启用。

您可以在 dev/tools/gulp/config/browser-sync.json 中配置 BrowserSync。 参考

示例用法

gulp dev:scss:my_theme --proxy http://m2.test --phtml

故障排除

如果您之前安装了 Grunt，请确保您已删除 package-lock.json 和 node_modules 文件夹。然后运行 npm install。

对于启用 SSL 的开发，请确保在 BrowserSync 配置文件中提供了 SSL 密钥和证书的路径。