fix: Modify the injection strategy in build mode to avoid error reporting

packages/core/inject/__test__/__snapshots__/inject-css.spec.ts.snap

@@ -2,37 +2,31 @@
 
 exports[`inject-css > injectCssOnBuild: basic 1`] = `
 "
-
-<style lang=\\"scss\\">/* foo.scss -> test2.css -> test.css */
+ <style lang=\\"scss\\" > 
+/* foo.scss -> test2.css -> test.css */
 /* foo.scss -> test.scss -> test2.css */
 
 /*@import \\"./assets/less/less-foo\\";*/
 div {
   color: v-bind(color)
 }
-</style>
-<style lang=\\"scss\\">
-body { background-color: black; }</style>"
+ </style>"
 `;
 
 exports[`inject-css > injectCssOnBuild: no lang 1`] = `
 "
-
-<style lang=\\"css\\">/* foo.scss -> test2.css -> test.css */
+ <style lang=\\"css\\" > 
+/* foo.scss -> test2.css -> test.css */
 /* foo.scss -> test.scss -> test2.css */
 
 /*@import \\"./assets/less/less-foo\\";*/
 div {
   color: v-bind(color)
 }
-</style>
-<style lang=\\"scss\\">
-body { background-color: black; }</style>"
+ </style>"
 `;
 
 exports[`inject-css > injectCssOnBuild: no styles 1`] = `
 "test
-
-<style lang=\\"scss\\">
-body { background-color: black; }</style>"
+ "
 `;

packages/core/inject/inject-css.ts

@@ -1,5 +1,6 @@
 import { transformInjectCSS } from '../transform/transform-inject-css'
 import { parseImports } from '../parser'
+import type { TInjectCSSContent } from '../runtime/process-css'
 import type { SFCDescriptor } from '@vue/compiler-sfc'
 import type { TMatchVariable } from '../parser'
 
@@ -15,18 +16,23 @@ export function injectCssOnServer(
 
 export function injectCssOnBuild(
   code: string,
-  injectCSSContent: Set<{ content: string, lang: string }>,
+  injectCSSContent: TInjectCSSContent,
   descriptor: SFCDescriptor) {
   const cssContent = [...injectCSSContent]
   let resCode = ''
-  descriptor.styles && descriptor.styles.forEach((value) => {
-    resCode = `${resCode}\n<style lang="${value.lang || 'css'}">${transformInjectCSS(value.content, parseImports(value.content).imports)}</style>`
-  })
-  cssContent.forEach((value) => {
-    resCode = `${resCode}\n<style lang="${value.lang}">${transformInjectCSS(value.content, parseImports(value.content).imports)}</style>`
+
+  descriptor.styles && descriptor.styles.forEach((value, index) => {
+    let injectCssCode = ''
+    cssContent.forEach((value) => {
+      if (value.styleTagIndex === index)
+        injectCssCode = `${injectCssCode}\n${transformInjectCSS(value.content, parseImports(value.content).imports)}`
+    })
+    const lang = value.lang || 'css'
+    const scoped = value.scoped ? 'scoped' : ''
+    resCode = `<style lang="${lang}" ${scoped}> ${injectCssCode}\n${transformInjectCSS(value.content, parseImports(value.content).imports)} </style>`
   })
   code = removeStyleTagsAndContent(code)
-  return `${code}\n${resCode}`
+  return `${code}\n ${resCode}`
 }
 
 export function removeStyleTagsAndContent(html: string): string {

packages/core/runtime/__test__/__snapshots__/process-css.spec.ts.snap

@@ -25,6 +25,7 @@ exports[`process css > getVBindVariableListByPath: basic 1`] = `
     {
       "content": "content foo color",
       "lang": "scss",
+      "styleTagIndex": 0,
     },
   },
   "vbindVariableListByPath": [

packages/core/runtime/process-css.ts

@@ -32,13 +32,14 @@ export const getCSSFileRecursion = (
  * @param server
  */
 // TODO: unit test
+export type TInjectCSSContent = Set<{ content: string, lang: string, styleTagIndex: number }>
 export const getVBindVariableListByPath = (
   descriptor: SFCDescriptor,
   id: string,
   cssFiles: ICSSFileMap,
   server: boolean) => {
   const vbindVariable: Set<string> = new Set()
-  const injectCSSContent = new Set<{ content: string, lang: string }>()
+  const injectCSSContent: TInjectCSSContent = new Set()
   // 遍历 sfc 的 style 标签内容
   for (let i = 0; i < descriptor.styles.length; i++) {
     const content = descriptor.styles[i].content
@@ -57,7 +58,7 @@ export const getVBindVariableListByPath = (
       // 根据 @import 信息，从 cssFiles 中，递归的获取所有在预处理时生成的 cssvars 样式
       getCSSFileRecursion(key, cssFiles, (res: ICSSFile) => {
         if (res.vBindCode) {
-          !server && injectCSSContent.add({ content: res.content, lang: res.lang })
+          !server && injectCSSContent.add({ content: res.content, lang: res.lang, styleTagIndex: i })
           res.vBindCode.forEach((vb) => {
             vbindVariable.add(vb)
           })

play/src/App.vue

@@ -78,13 +78,57 @@ export default defineComponent({
   </div>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
+@import './assets/scss/mixin.scss';
+@import './assets/scss/variables.module.scss';
 /* foo.scss -> test2.css -> test.css */
 /* foo.scss -> test.scss -> test2.css */
 
 /*@import "./assets/less/less-foo";*/
-div {
+/*div {
   color: v-bind(color)
 }
-@import './assets/scss/foo.scss';
+@import './assets/scss/foo.scss';*/
+.app-wrapper {
+  @include clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
+
+  &.mobile.openSidebar {
+    position: fixed;
+    top: 0;
+  }
+}
+
+.drawer-bg {
+  background: #000;
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
+
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$base-sidebar-width});
+  transition: width 0.28s;
+}
+
+.hideSidebar .fixed-header {
+  width: calc(100% - 54px);
+}
+
+.sidebarHide .fixed-header {
+  width: 100%;
+}
+
+.mobile .fixed-header {
+  width: 100%;
+}
 </style>

play/src/assets/scss/mixin.scss

@@ -0,0 +1,66 @@
+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+@mixin scrollBar {
+  &::-webkit-scrollbar-track-piece {
+    background: #d3dce6;
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #99a9bf;
+    border-radius: 20px;
+  }
+}
+
+@mixin relative {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+@mixin pct($pct) {
+  width: #{$pct};
+  position: relative;
+  margin: 0 auto;
+}
+
+@mixin triangle($width, $height, $color, $direction) {
+  $width: $width/2;
+  $color-border-style: $height solid $color;
+  $transparent-border-style: $width solid transparent;
+  height: 0;
+  width: 0;
+
+  @if $direction==up {
+    border-bottom: $color-border-style;
+    border-left: $transparent-border-style;
+    border-right: $transparent-border-style;
+  }
+
+  @else if $direction==right {
+    border-left: $color-border-style;
+    border-top: $transparent-border-style;
+    border-bottom: $transparent-border-style;
+  }
+
+  @else if $direction==down {
+    border-top: $color-border-style;
+    border-left: $transparent-border-style;
+    border-right: $transparent-border-style;
+  }
+
+  @else if $direction==left {
+    border-right: $color-border-style;
+    border-top: $transparent-border-style;
+    border-bottom: $transparent-border-style;
+  }
+}

play/src/assets/scss/variables.module.scss

@@ -0,0 +1,66 @@
+// base color
+$blue: #324157;
+$light-blue: #3A71A8;
+$red: #C03639;
+$pink: #E65D6E;
+$green: #30B08F;
+$tiffany: #4AB7BD;
+$yellow: #FEC171;
+$panGreen: #30B08F;
+
+// 默认菜单主题风格
+$base-menu-color: #bfcbd9;
+$base-menu-color-active: #f4f4f5;
+$base-menu-background: #304156;
+$base-logo-title-color: #ffffff;
+
+$base-menu-light-color: rgba(0, 0, 0, 0.7);
+$base-menu-light-background: #ffffff;
+$base-logo-light-title-color: #001529;
+
+$base-sub-menu-background: #1f2d3d;
+$base-sub-menu-hover: #001528;
+
+// 自定义暗色菜单风格
+/**
+$base-menu-color:hsla(0,0%,100%,.65);
+$base-menu-color-active:#fff;
+$base-menu-background:#001529;
+$base-logo-title-color: #ffffff;
+
+$base-menu-light-color:rgba(0,0,0,.70);
+$base-menu-light-background:#ffffff;
+$base-logo-light-title-color: #001529;
+
+$base-sub-menu-background:#000c17;
+$base-sub-menu-hover:#001528;
+*/
+
+$--color-primary: #409EFF;
+$--color-success: #67C23A;
+$--color-warning: #E6A23C;
+$--color-danger: #F56C6C;
+$--color-info: #909399;
+$--color-placeholder: #a8abb2;
+$base-sidebar-width: 200px;
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  menuColor: $base-menu-color;
+  menuLightColor: $base-menu-light-color;
+  menuColorActive: $base-menu-color-active;
+  menuBackground: $base-menu-background;
+  menuLightBackground: $base-menu-light-background;
+  subMenuBackground: $base-sub-menu-background;
+  subMenuHover: $base-sub-menu-hover;
+  sideBarWidth: $base-sidebar-width;
+  logoTitleColor: $base-logo-title-color;
+  logoLightTitleColor: #0E53C4;
+  primaryColor: $--color-primary;
+  successColor: $--color-success;
+  dangerColor: $--color-danger;
+  infoColor: $--color-info;
+  warningColor: $--color-warning;
+  placeholderColor : $--color-placeholder;
+}

play/vite.config.ts

@@ -29,7 +29,7 @@ export default defineConfig({
     viteVueCSSVars({
       include: [/.vue/],
       includeCompile: ['**/**.scss'],
-      server: true,
+      server: false,
     }),
   ],
 })