To prepare the addon for the v2 conversion we need an alternative for the current scss import setup.
The current setup publishes styles from the app/styles folder. ember-cli merges this folder with the app's styles folder which means the relative @import "ember-appuniversum"; works since the files will be placed "next" to the app.scss file during the build.
This app folder merging for styles is no longer supported for v2 addons. A long term alternative is to drop the sass setup and switch to css variables for configuration. We could then import the css where needed.
A short term solution would be to publish the styles from the root of the addon package. Application would then need to configure their sass compiler to look for files in the node_modules folder and use the full package name.
For example, an import like @import "@appuniversum/ember-appuniversum/styles"; would then import the node_modules/@appuniversum/ember-appuniversum/styles.scss file.
To prepare the addon for the v2 conversion we need an alternative for the current scss import setup.
The current setup publishes styles from the
app/stylesfolder. ember-cli merges this folder with the app's styles folder which means the relative@import "ember-appuniversum";works since the files will be placed "next" to the app.scss file during the build.This app folder merging for styles is no longer supported for v2 addons. A long term alternative is to drop the sass setup and switch to css variables for configuration. We could then import the css where needed.
A short term solution would be to publish the styles from the root of the addon package. Application would then need to configure their sass compiler to look for files in the node_modules folder and use the full package name.
For example, an import like
@import "@appuniversum/ember-appuniversum/styles";would then import thenode_modules/@appuniversum/ember-appuniversum/styles.scssfile.We need to decide on the new import paths for all the scenarios documented in the getting started documentation.
The easiest solution would be to replace the
ember-appuniversumprefix with thebasic import
| old import | new import | | ---------- | ----------- | | `@import "ember-appuniversum";` | `@appuniversum/ember-appuniversum/styles` |Flexible imports
Simply replace the `ember-appuniversum/` prefix with `@appuniversum/ember-appuniversum/styles` prefix. For example: | old import | new import | | ---------- | ----------- | | `@import "ember-appuniversum/a-settings";` | `@appuniversum/ember-appuniversum/styles/a-settings` |Manual imports
Simply replace the `ember-appuniversum/` prefix with `@appuniversum/ember-appuniversum/styles` prefix and add the type as a subfolder. For example: | old import | new import | | ---------- | ----------- | | `@import "ember-appuniversum/s-colors";` | `@appuniversum/ember-appuniversum/styles/settings/s-colors` | | `@import "ember-appuniversum/t-font-size";` | `@appuniversum/ember-appuniversum/styles/tools/t-font-size` | | `@import "ember-appuniversum/...";` | `@appuniversum/ember-appuniversum/styles/type/...` |