README

使用Vite和Sass（SCSS）为特定页面配置Shopware 6（以实现CSS拆分的能力）

原因

此主题（插件）是一个概念验证，用于实验和改进Shopware 6的CSS。

内容

• 为带有默认Storefront（twig）的Shopware 6提供Vite支持
• 添加SCSS监视和构建命令
• 使用Lightning CSS将dist目录中的CSS文件转换和压缩
• 将构建输出到public/build文件夹
• 提供单独的product.css文件，而不是all.css文件
  • 建设中：结账、主页、列表、联系...等等
• 允许将自定义SCSS文件与核心SCSS文件结合使用（见load-path）
• 使用Rollup插件生成关键CSS（见vite.config.js中的PluginCritical）
• 扩展storefront/layout/meta.html.twig以使用Symfony & Vite（见这里）

限制

• 此主题（插件）期望Shopware核心位于项目src文件夹内（未与供应商中的核心进行测试）
• 此主题（插件）不支持具有不同主题配置/颜色变量等的不同销售渠道
• 目前，尚未集成资产文件，如图片、字体等

结果

• 从2023-11-14
  • public/build/assets/product-84b1e655.css 283.46 kB │ gzip: 43.89 kB
  • public/build/assets/all-0d8fa2e9.css 381.57 kB │ gzip: 51.69 kB

如何设置

• 将所有插件文件复制到custom/plugins/ViteSassPages
• 通过composer需要插件 composer require brocksinet/vite-sass-pages
• 执行插件刷新 bin/console plugin:refresh
• 安装并激活插件 bin/console plugin:install ViteSassPages --activate
• 更新config/bundles.php文件并添加Pentatrion\ViteBundle\PentatrionViteBundle::class => ['all' => true],
• 添加文件config/packages/pentatrion_vite.yaml，内容如下

  pentatrion_vite:
      crossorigin: anonymous
  

• 从根目录安装NPM：cd custom/plugins/ViteSassPages/ && npm i && cd ../../../
• 提示：如果您的URL不是https://:8000/，请在vite.config.js中更新用于关键CSS生成的URL

如何使用

• 使用devenv启动Shopware
• 在devenv shell中进行开发（目录：cd custom/plugins/ViteSassPages/）
  • SCSS监视命令 npm run scss:watch
  • Vite开发命令 npm run dev

进一步优化

• 您可以使用purgecss来删除未使用的类（目录：cd custom/plugins/ViteSassPages/）
  • 例如：npx purgecss --css ../../../public/build/assets/all-48786481.css --content ../../../src/Storefront/Resources/views/**/*.html.twig （您需要更新要清除的CSS文件的文件名）

已知问题

• 窗口控制台告诉你：module is not defined取消注释

  if (module.hot) {
    module.hot.accept();
  }
  

  在src/Storefront/Resources/app/storefront/src/main.js
• 未导入字体inter-fontface scss
• 将.vite添加到项目根目录的.gitignore文件中