Postcss - 颜色函数插件 - “无法从字符串解析颜色”答案

【问题标题】：Postcss - color function plugin - "Unable to parse color from string"Postcss - 颜色函数插件 - “无法从字符串解析颜色”
【发布时间】：2017-07-08 13:16:01
【问题描述】：

使用以下 postcss 插件：

postcss-cssnext
postcss 嵌套
postcss-color-function

在使用以下颜色功能时，我经常遇到以下错误。

Unable to parse color from string "l(-20%)"

styles.css

@import 'variables.css';
//          ^-- contains: --blue: #3892e0;

& a {
    color: color(var(--blue), l(-20%));
    &:hover {
        color: color(var(--blue), l(0%));
    }
}

Webpack 2 sn-p

{
    loader: 'postcss-loader',
    options: {
        plugins: [
            cssImport({ path: './src' }),
            cssnext({ browsers: ['last 2 versions'] }),
            colorFunction(),
            nested(),
        ],
    }
}

【问题讨论】：

colorFunction 已经包含在 cssnext 中。并且 cssnext 还已经包含了一个嵌套提案语法草案。
明白了-澄清一下-我可以从插件阵容中删除nested()和colorFunction()吗？在这种特殊情况下，它并不会真正影响问题/答案，因为错误消息仍然很神秘。顺便说一句，在 CSSNext @MoOx 上做得很好
显然这不是一个anwser，只是一个评论。查看包含的内容cssnext.io
非常感谢@MoOx

标签： css webpack webpack-style-loader postcss cssnext

【解决方案1】：

该错误虽然不是描述性的，但表明不需要,。这遵循未来的 CSS（提议的）规范，但如果您来自任何其他语言，则可能会成为一个讨厌的习惯。

解决办法就是去掉,的：

& a {
    color: color(var(--blue) l(-20%));
    &:hover {
        color: color(var(--blue) l(0%));
    }
}

【讨论】：