style-resources-loader在components使用颜色变量报错

如果您使用`style-resources-loader`在组件中使用颜色变量时遇到错误，可能是由于您没有在Webpack配置中正确地设置`style-resources-loader`。

请确保以下几点：

1. 在Webpack配置中正确地配置`style-resources-loader`。例如：

{
  test: /\.scss$/,
  use: [
    'vue-style-loader',
    'css-loader',
    'sass-loader',
    {
      loader: 'style-resources-loader',
      options: {
        patterns: [
          path.resolve(__dirname, './src/styles/variables.scss')
        ]
      }
    }
  ]
}

在上面的例子中，`style-resources-loader`会将`./src/styles/variables.scss`中的变量注入到所有SCSS文件中。

2. 在组件中正确地引用颜色变量。例如，在Vue组件中：

<template>
  <div :style="{ background: '$primary-color' }">Hello World</div>
</template>

在上面的例子中，`$primary-color`是在`variables.scss`中定义的变量。

如果您仍然遇到错误，请提供更多详细信息，以便更好地帮助您解决问题。