Vue @import 导入样式文件添加请求头

在 Vue 中使用 @import 导入样式文件时，可以通过在 vue.config.js 中的 css.loaderOptions 选项中设置 sass 或 less 的 prependData 选项来添加请求头。

例如，在 vue.config.js 文件中添加以下配置：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import '@/assets/styles/variables.scss';`,
        additionalData: `$http-header: 'Authorization: Bearer token';`
      },
      less: {
        prependData: `@import '@/assets/styles/variables.less';`,
        additionalData: `@http-header: 'Authorization: Bearer token';`
      }
    }
  }
};

在 prependData 中导入样式文件，并在文件中定义请求头变量。在 additionalData 中定义请求头变量，以便在样式中引用。

然后，在样式文件中使用请求头变量，如下所示：

// variables.scss
$theme-color: #007aff;
$http-header: '';

// style.scss
@import 'variables';

.header {
  background-color: $theme-color;
  &:before {
    content: $http-header;
  }
}

// variables.less
@theme-color: #007aff;
@http-header: '';

// style.less
@import 'variables';

.header {
  background-color: @theme-color;
  &:before {
    content: @http-header;
  }
}