CODEWITHSUNDEEP
sassmaterial-designrolluppostcss
Jackie
Jackie

Reputation: 23597

Why am I getting "Expected digit" when trying to import a Sass variable from Material using Rollup and PostCSS?

I have the following code...

@use "@material/top-app-bar/_variables.import" as mdc;
.color{
    background-color: lightblue;
    height: mdc.$row-height;
}

But when I run I get...

Error: Expected digit.
src/components/header/index.style.scss 4:17 root stylesheet

I am guessing I am importing the Sass file incorrectly. I have tried...

@use "@material/top-app-bar/variables";
.color{
    background-color: lightblue;
    height: variables.$row-height;
}

@use "@material/top-app-bar/mdc-top-app-bar";
.color{
    background-color: lightblue;
    height: $mdc-top-app-bar-row-height;
}

Etc... but nothing I try is working. How do I import the variable using sass?

Update

I noticed this further up

[!] (plugin postcss) Error: Expected digit.

src/components/header/index.style.scss 9:29 root stylesheet

Could this be a Rollup plugin issue?

Update 2

Looks like part of the problem was installing the node-sass package. Now I get...

[!] (plugin postcss) Error: Invalid CSS after "...ight: variables": expected expression (e.g. 1px, bold), was ".$row-height;"

When I run the following...

@use "@material/top-app-bar/variables" as variables;
.color{
    background-color: lightblue;
    height: variables.$row-height;
}

I also tried the simpler 

// ./_variables.scss
$row-height: 64px !default;

@use "./variables";
.color{
    background-color: lightblue;
    height: variables.$row-height;
}

And I still get the same thing.

Upvotes: 2

Views: 5344

Answers (1)

benembery
benembery

Reputation: 676

I had a similar issue using the sass color module.

I had to add the following to my rollup.config.js

import sassPlugin from 'rollup-plugin-sass'
import sass from 'sass'

sassPlugin({
  runtime: sass,
  // Other properties omitted for brevity. 
})

Upvotes: 1

Related Questions