Not working with webpack if colors in another file
muuvmuuv opened this issue · 2 comments
muuvmuuv commented
I'm using your plugin in webpack like this: https://hastebin.com/osuvulenuh.js
It is all working fine if I use color-mod inside my _colors.scss file, but when I try to use it in another file it fails and says:
[1] multi ./scss/additive.scss 28 bytes {style} [built]
+ 7 hidden modules
ERROR in ./scss/additive.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/lib/index.js):
Syntax Error
(14:24) Expected a valid color adjuster
12 |
13 | background: var(--btn-background);
> 14 | box-shadow: 0 0 0 2px color-mod(var(--btn-background) alpha(80%));
| ^
15 |
16 | color: var(--btn-color);
at runLoaders (D:\Websites\Additive\Package\node_modules\webpack\lib\NormalModule.js:286:20)
at D:\Websites\Additive\Package\node_modules\loader-runner\lib\LoaderRunner.js:364:11jonathantneal commented
You can reference the colors from unrelated files using the importFrom option.
See: https://github.com/jonathantneal/postcss-color-mod-function#importfrom
muuvmuuv commented
Thanks, @jonathantneal! Now I get an error because I use alpha and not just a. This is a little bit confusing. All other colour adjusters are working, only alpha is not.