perf: remove unused css

src/App.vue

@@ -19,9 +19,10 @@ export default {
     --color-danger: #ed5565;
     --menu-bg: #2f4050;
     --menu-text: #a7b1c2;
+    --menu-active-text: white;
+    --menu-active-left: #1ab394;
     --menu-hover: '#293846';
     --submenu-bg: '#1f2d3d';
     --submenu-hover: '#3b4c5b';
-    --menu-active-left: #1ab394;
   }
 </style>

src/styles/index.scss

@@ -2,7 +2,7 @@
 @import './transition.scss';
 @import './sidebar.scss';
 @import './menu.scss';
-@import './font-awesome/font-awesome.min.css';
+@import './fonts/font-awesome.min.css';
 
 ::-webkit-scrollbar {
   width:14px;

src/styles/themes/default.scss

@@ -1,17 +0,0 @@
-// ElementUI
-$--color-primary: #1ab394;
-$--color-success: #1c84c6;
-$--color-info: #23c6c8;
-$--color-warning: #f8ac59;
-$--color-danger: #ed5565;
-
-// Text
-$--color-text-primary: #303133;
-$--color-text-regular: #606266;
-
-// Menu
-$menuText: var(--menu-text);
-$menuActiveLeft: var(--menu-active-left);
-$menuActiveText: white;
-$subMenuActiveText: #f4f4f5;
-$menuBg: var(--menu-bg);

src/styles/var.scss

@@ -1,10 +0,0 @@
-/* 参考根目录下的 element-variables */
-/* 切记此处不修改配置，以element-variables为准，可适当增加自定义配置 */
-/* 如果要修改element-variables，请执行npm run build_theme更新主题 */
-@import "./element-variables.scss";
-
-:export {
-  themeColor: $--color-primary;
-  themeInfo: $--color-info;
-  themeSuccess:$--color-success;
-}

src/styles/variables.scss

@@ -1,5 +1,11 @@
-@import "./themes/default";
+// Color
+$--color-primary: var(--color-primary);
+$--color-success: var(--color-success);
+$--color-info: var(--color-info);
+$--color-warning: var(--color-warning);
+$--color-danger: var(--color-danger);
 
+// Text
 $--color-text-primary: #303133;
 $--color-text-regular: #606266;
 $--color-black: #000000;
@@ -8,6 +14,11 @@ $--size-base: 13px;
 $--color-link: $--color-text-primary;
 $--color-link-highlight: #23527c;
 
+// Menu
+$menuText: var(--menu-text);
+$menuActiveLeft: var(--menu-active-left);
+$menuActiveText: var(--menu-active-text);
+$menuBg: var(--menu-bg);
 $menuTextWeight: 600;
 $menuHover: var(--menu-hover);
 $subMenuBg: var(--submenu-bg);

src/utils/theme/color.js

@@ -1,14 +1,16 @@
 import color from 'css-color-function'
 import formula from './formula.json'
 import defaultThemeConfig from './default.js'
-import variables from '@/styles/var.scss'
 
 export function generateColors(themeColors) {
   const colors = {}
+  if (!themeColors) {
+    themeColors = defaultThemeConfig
+  }
   let primaryColor = themeColors
   let subColor = defaultThemeConfig
   if (typeof themeColors === 'object') {
-    primaryColor = themeColors['--color-primary'] || variables.themeColor
+    primaryColor = themeColors['--color-primary']
     subColor = Object.keys(themeColors).length > 0 ? themeColors : defaultThemeConfig
   }
 

src/utils/theme/index.js

@@ -1,7 +1,6 @@
 import { changeMenuColor, generateColors, mix } from './color'
 import axios from 'axios'
 import formula from './formula.json'
-import variables from '@/styles/var.scss'
 
 let originalStyle = ''
 
@@ -64,7 +63,7 @@ export function changeThemeColors(themeColors) {
         axios.spread((file, extraFile) => {
           const fileData = file.data
           const extraFileData = extraFile.data.replace(/[\r\n]/g, '')
-          originalStyle = replaceStyleColors(fileData + extraFileData)
+          originalStyle = replaceStyleColors(fileData + extraFileData, themeColors)
           resolve()
         })
       )
@@ -77,8 +76,8 @@ export function changeThemeColors(themeColors) {
   })
 }
 
-export function replaceStyleColors(data) {
-  const colors = generateColors(variables.themeColor)
+export function replaceStyleColors(data, themeColors) {
+  const colors = generateColors(themeColors['--primary'])
   const colorMap = new Map()
   Object.keys(formula).forEach((key) => {
     colorMap.set(colors[key], key)

vue.config.js

@@ -77,15 +77,6 @@ module.exports = {
     after: require('./mock/mock-server.js')
   },
   css: {
-    loaderOptions: {
-      sass: {
-        prependData: (content, loaderContext) => {
-          const { resourcePath } = loaderContext
-          if (resourcePath.endsWith('var.scss')) return content
-          return `@import "@/styles/var.scss"; ${content}`
-        }
-      }
-    }
   },
   configureWebpack: {
     // provide the app's title in webpack's name field, so that