Angular-cli: Materialize CSS custom theme

[parker789]

OS?

Mac OS X Sierra

Versions.

angular-cli: 1.0.0-beta.21
node: 7.1.0
os: darwin x64

Repro steps.

I created a new project using the ng new myapp --style=scss command. After doing this I've added the global .scss and .js dependencies into my angular-cli.json:

"styles": [
  "../node_modules/materialize-css/sass/materialize.scss",
  "styles.scss"
],
"scripts": [
 "../node_modules/jquery/dist/jquery.js",
 "../node_modules/materialize-css/dist/js/materialize.js"
],

After this I copied the materializecss' _variables.scss contents from node_modules/materialize-css/sass/components/_variables.scss into my local file src/assets/styles/_variables.scss, and inside this file I'm trying @import "./assets/styles/_variables.scss", which keeps resulting in the error log shown below. I found that both of these imports (below) together remove the error, but my modified styles are not showing within my app.. it still happens to be the default materialize-css theme.

@import "../node_modules/materialize-css/sass/components/_color.scss";
@import "./assets/styles/_variables.scss";

The log given by the failure.

ERROR in ./~/css-loader?sourcemap!./~/postcss-loader!./~/sass-loader?sourcemap!./src/styles.scss
Module build failed:
  $primary-color-light: lighten($primary-color, 15%);
                       ^
      Argument `$color` of `lighten($color, $amount)` must be a color

Backtrace:
    src/assets/styles/_variables.scss:40, in function `lighten`
    src/assets/styles/_variables.scss:40
      in myapp/src/assets/styles/_variables.scss (line 40, column 25)
 @ ./src/styles.scss 4:14-179
 @ multi styles

Mention any other details that might be useful.

I assume that this would also be an issue when trying to overwrite Bootstrap variables and other frameworks? Am I just doing something wrong? Thanks!

[grizzm0]

Instead of including materialize.scss in the styles array in angular-cli.json you should use @import '~materialize-css/sass/materialize.scss'; in one of your files included in the styles array (creating a new file called materialize.scss for example).

Before the import you can put $foo-color: #00ff00 !default; to override any variables in materialize.

[parker789]

I won't be home to play with this until later, but for conversation sake I did try this. However, I did not manually add overriding variable lines $foo-color: #00ff00 !default;, etc above the import. I just included a second import below the main import like in my OP (@import "./assets/styles/_variables.scss";) but that spits out lots of errors because the scss functions provided by materialize aren't available? I'm trying to be hard headed here and get to use materialize's functions, but is that just not possible?

[Maistho]

This is how we do it

Contents of src/styles/styles.scss:

@import '../../node_modules/materialize-css/sass/components/color';
@import './colors';

$roboto-font-path: '../../node_modules/materialize-css/fonts/roboto/' !default;

@import '../../node_modules/materialize-css/sass/materialize';

Contents of src/styles/_colors.scss:

$primary-color: color("indigo", "darken-3") !default;
$primary-color-light: lighten($primary-color, 15%) !default;
$primary-color-dark: darken($primary-color, 15%) !default;

$secondary-color: color("indigo", "accent-2") !default;
$success-color: color("green", "base") !default;
$error-color: color("red", "base") !default;
$link-color: color("light-blue", "darken-1") !default;

Note that we include the materialize color file before defining colors, which allows us to make use of color(). If you need any of the functions in order to define your variables, you can include just those specific files.

[hansl]

Please report back when you have a chance to try the solution above. I'll close this for now and if you still have a problem I'll reopen. Cheers!

[parker789]

@Maistho, thanks for the snippets! @hansl I've resolved the issue in my OP, but I do have another question which I'm asking below. Let me know if you'd like me to re-open a new issue for this.

$roboto-font-path: '../../node_modules/materialize-css/fonts/roboto/' !default; was exactly what I was missing when I first tried this method.

Now, I do happen to have another question which could be related to view encapsulation with styles, or something related to the angular-cli build process. Using the method above, I'm able to import all the materialize required scss files into my styles.scss, but after serving the app I'm not able to @extend .blue, .lighten-2 because:

ERROR in ./src/app/app.component.scss
Module build failed:
  @extend .blue, .lighten-4
 ^
      ".container" failed to @extend ".blue".
The selector ".blue" was not found.
Use "@extend .blue !optional" if the extend should be able to fail.

[grizzm0]

It's not global. You need to import the files where you need the
functions/variables.

On Sat, Dec 3, 2016, 16:30 parker789 [e-mail] wrote:

@Maistho https://github.com/Maistho, thanks for the snippets! @hansl
https://github.com/hansl I've resolved the issue in my OP, but I do
have another question which I'm asking below. Let me know if you'd like me
to re-open a new issue for this.

$roboto-font-path: '../../node_modules/materialize-css/fonts/roboto/'
!default; was exactly what I was missing when I first tried this method.

Now, I do happen to have another question which could be related to view
encapsulation with styles, or something related to the angular-cli build
process. Using the method above, I'm able to import all the materialize
required scss files into my styles.scss, but after serving the app I'm
not able to @extend .blue, .lighten-2 because:

ERROR in ./src/app/app.component.scss
Module build failed:
@extend .blue, .lighten-4
^
".container" failed to @extend ".blue".
The selector ".blue" was not found.
Use "@extend .blue !optional" if the extend should be able to fail.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/3347#issuecomment-264645726,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACxW_QajMQqg82_3QJQVJuin0HwnnZ-Pks5rEYsZgaJpZM4LCEsk
.

[Maistho]

That's just how view encapsulation works. The styles for each component is separate from the styles in styles.scss, so if you want to have the materialize variables and such you'll need to import them for each component (but I probably wouldn't recommend that because of performance reasons).

If there is a good way to do it without importing it extra times, I haven't found it yet.

[parker789]

Drag. I was afraid of that :(

Well - I believe I'll try and avoid doing that! Thanks for all the help guys.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}