定义全局主题色

定义全局主题色

在 vue.config.js 》 css》loaderOptions》粘贴以下代码

  scss: {
        additionalData(content, loaderContext) {
          const { resourcePath, rootContext } = loaderContext
          const relativePath = path.relative(rootContext, resourcePath)
          if (
            relativePath.replace(/\\/g, '/') !==
            'src/assets/styles/自己的文件名.scss'
          )
            return '@import "~@/assets/styles/自己的文件名.scss";' + content
          return content
        },
      },

在scss文件中定义

$themeColorRed: #F95146;
$themeBackground: linear-gradient(
  180deg,
  #ff4826 0%,
  #ff4c2bfa 19%,
  #ff6247e8 31%,
  #ff705dbf 62%,
  #ffffff00 100%
);

在页面中直接使用

 color: $themeColorRed;