vue全局定义的scss变量如$red:#f00，在组件不能直接引用如background: $red

Question

common.scss在vue项目中全局引入，在header组件中不能用全局定义的scss变量和mixin等
common.csss：

$color_active:#4381E6;

header.vue：

.cp_header{
    background: $color_active;
}

Answer 1

如果想全局使用的话 需要用 webpack配置 sass-resources-loader
npm install sass-resources-loader --save-dev

utils.js

scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/xxxx.scss')
        }
      }
    )

Answer 2

style标签用了scoped会有这个问题