vue-template-admin项目的主题样式设置

一，原有项目的主题设置

官方文档：样式 | vue-element-admin (panjiachen.github.io)

按照官网所说，本项目没有设置自动注入 sass 的 mixin 到全局，所以需要在使用的地方手动引入 mixin。

<style rel="stylesheet/scss" lang="scss">
  @import "src/styles/mixin.scss";
</style>

这样其实很不方便，我想全局引入变量，让页面中的样式可以使用变量。

二，该项目的scss使用方法

如需要自动将 mixin 注入到全局 ，可以使用sass-resources-loader。

因为main.js可以直接import css文件，而不可以直接import scss文件， 所以一些样式文件虽然scss结尾，但是样式中是没有scss特殊语法的，所以直接引入到main.js中即可全局生效

 import "@/styles/index.scss"; // global css

然后在此文件中：

@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';

而这里的’./variables.scss’和’./mixin.scss’才有scss特殊语法，所以它两想要在页面中进行使用，还需要按需引入。

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";
</style>

现在，我想让这两个文件全局引入，然后页面中不再需要每次要使用都得引入一次。

三，全局引入scss

直接修改vue.config.js文件即可：

module.exports = {
  ...//其他配置
  css: {
    loaderOptions: {
      scss: {
          prependData: `@import "@/styles/variables.scss";@import "@/styles/mixin.scss";`// 引入全局 SasS 变量的文件（对应你全局文件的路径）
      },
    }
  }
};

四，样式修改

这样之后，修改样式文件，只需要在@/styles/variables.scss文件中修改变量值即可：

// base color
$blue:#324157;
$light-blue:#3A71A8;
$red:#C03639;
$pink: #E65D6E;
$green: #30B08F;
$tiffany: #4AB7BD;
$yellow:#FEC171;
$panGreen: #30B08F;

// sidebar
$menuText:#bfcbd9;
$menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951

$menuBg:#304156;
$menuHover:#263445;

$subMenuBg:#1f2d3d;
$subMenuHover:#001528;

$sideBarWidth: 210px;