Sage 9: Overriding SCSS values in NPM package

I am having some trouble getting my custom SCSS variables to override those from the slick npm package I am importing. Everything else is working fine, and I can see the css is being imported correctly.
In main.scss I have:

@import “~slick-carousel/slick/slick.scss”;
@import “~slick-carousel/slick/slick-theme.scss”;
$slick-loader-path: “~slick-carousel/slick”;
$slick-font-path: “#{$slick-loader-path}fonts/”;
$slick-arrow-color: #000;

But the slick arrow color is still set to its default white. Any ideas?