The AMP specification enforces a CSS size limit, and does not support external stylesheets. Mobify AMP generates the relevant CSS to the current template, and renders it in the
<head> of the document. More details about AMP stylesheet limitations can be found here.
Styles and components #
In an effort to only include CSS required by the components used in a particular template, a mapping between components and their styles is maintained. When adding a new component, make sure to add the appropriate entry in
amp/app/styles.js to associate the component with its Base and Theme styles. In the future, this step will be automated.
Sharing with the PWA #
Base, animations, lib and utility styles are linked directly to those styles in the
The Webpack configuration for Mobify AMP includes an alias for the web directory. This allows styles to be imported from the
web/ folder using the path
@import '~web/path/to/file'. The
~ is used to indicate to
sass-loader that this path is not relative, and should be handled by Webpack. For more information, see the
In order to stay aligned with the AMP styling specifications and help build valid AMP markup, sass-lint and stylelint have been set up to keep AMP styles valid, as well as PWA styles shared by AMP valid.