x-dialog: fix prevent-body-scroll.css not found (less-loader issue) #…

…2118

src/components/x-dialog/metas.yml

@@ -116,6 +116,11 @@ slots:
     en: main content of the dialog
     zh-CN: 弹窗的主体内容
 changes:
+  next:
+    en:
+      - '[fix] fix prevent-body-scroll.css not found (less-loader issue) #2118'
+    zh-CN:
+      - '[fix] 修复 prevent-body-scroll.css 无法找到问题(less-loader) #2118'
   v2.7.0:
     en:
       - '[feature] add event:on-click-mask #2102'

src/mixins/prevent-body-scroll.css → src/mixins/prevent-body-scroll.css.vue

@@ -1,8 +1,15 @@
+<script>
+/* this component is used just for importing style (avoid less-loader issue) */
+export default {}
+</script>
+
+<style>
 .vux-modal-open {
   overflow: hidden;
   position: fixed;
   width: 100%;
 }
 .vux-modal-open-for-container {
   overflow: hidden!important;
-}
+}
+</style>

src/mixins/prevent-body-scroll.js

@@ -1,5 +1,5 @@
 import dom from '../libs/dom'
-require('./prevent-body-scroll.css')
+import style from './prevent-body-scroll.css.vue' // eslint-disable-line
 
 const BODY_CLASS_NAME = 'vux-modal-open'
 const CONTAINER_CLASS_NAME = 'vux-modal-open-for-container'
@@ -9,8 +9,10 @@ export default {
   methods: {
     // some plugin may be imported before configPlugin, so we cannot get gloal config when component is created
     getLayout () {
-      if (this.$vux && this.$vux.config && this.$vux.config.$layout === 'VIEW_BOX') {
-        return 'VIEW_BOX'
+      if (typeof window !== 'undefined') {
+        if (window.VUX_CONFIG && window.VUX_CONFIG.$layout === 'VIEW_BOX') {
+          return 'VIEW_BOX'
+        }
       }
       return ''
     },

src/plugins/config/index.js

@@ -8,6 +8,10 @@ export default {
       Vue.vux.config = config
     }
 
+    if (typeof window !== 'undefined') {
+      window.VUX_CONFIG = config
+    }
+
     Vue.mixin({
       created: function () {
         if (this.$vux) {