Postcss — плагин функции цвета — невозможно проанализировать цвет из строки

Использование следующих плагинов postcss:

  • postcss-cssследующий
  • postcss-вложенный
  • postcss-цвет-функция

Я постоянно сталкиваюсь со следующей ошибкой при использовании следующей функции цвета.

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

стили.css

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

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

Фрагмент веб-пакета 2

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

webpack css postcss webpack-style-loader cssnext
person Chris    schedule 19.02.2017    source источник
comment
colorFunction уже включен в cssnext. И cssnext также уже включает черновик синтаксиса предложения вложенности.   -  person MoOx    schedule 20.02.2017
comment
Попался - чтобы уточнить - я могу удалить nested() и colorFunction() из линейки плагинов? На самом деле это не влияет на вопрос/ответ в данном конкретном случае, поскольку сообщение об ошибке все еще довольно загадочно. Кстати, отличная работа над CSSNext @MoOx   -  person Chris    schedule 20.02.2017
comment
Очевидно, это не ответ, а просто комментарий. Узнайте, что включено cssnext.io   -  person MoOx    schedule 20.02.2017
comment
Отличное спасибо @MoOx   -  person Chris    schedule 21.02.2017

Ответы (1)


arrow_upward
2
arrow_downward

Ошибка, хотя и не описательная, указывает на то, что , не нужен. Это следует из будущей (предлагаемой) спецификации CSS, но может стать неприятной привычкой, если вы используете любой другой язык.

Решение состоит в том, чтобы просто удалить ,:

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