改造程序,改sass为less

package.json

 {
-  "name": "luckydraw",
+  "name": "goodluck",
   "version": "0.1.0",
   "private": true,
   "license": "MIT",
@@ -27,9 +27,14 @@
     "eslint": "^5.16.0",
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-vue": "^5.0.0",
-    "node-sass": "^4.13.0",
     "prettier": "^1.19.1",
-    "sass-loader": "^8.0.0",
+    "css-loader": "^4.2.2",
+    "postcss-loader": "^3.0.0",
+    "rimraf": "^2.5.4",
+    "file-loader": "^1.1.6",
+    "style-loader": "^1.2.1",
+    "less": "^3.0.1",
+    "less-loader": "^4.0.5",
     "vue-template-compiler": "^2.6.10"
   }
 }

src/App.vue

@@ -92,10 +92,6 @@
     />
     <Result :visible.sync="showResult"></Result>
 
-    <span class="copy-right">
-      Copyright©zhangyongfeng5350@gmail.com
-    </span>
-
     <audio
       id="audiobg"
       preload="auto"
@@ -370,7 +366,7 @@ export default {
   }
 };
 </script>
-<style lang="scss">
+<style lang="less">
 #root {
   height: 100%;
   position: relative;

src/assets/style/index.less

+@import './base.less';
+@import './animation.less';

src/assets/style/index.scss

-@import './base.scss';
-@import './animation.scss';

src/components/Importphoto.vue

@@ -133,7 +133,7 @@ export default {
   }
 };
 </script>
-<style lang="scss">
+<style lang="less">
 .c-Importphoto {
   .el-dialog {
     height: 380px;

src/components/LotteryConfig.vue

@@ -145,7 +145,7 @@ export default {
   }
 };
 </script>
-<style lang="scss">
+<style lang="less">
 .c-LotteryConfig {
   .el-dialog__body {
     height: 340px;

src/components/Publicity.vue

@@ -53,7 +53,7 @@ export default {
   }
 };
 </script>
-<style lang="scss">
+<style lang="less">
 .c-Publicity {
   height: 100%;
   // width: 1000px;

src/components/Result.vue

@@ -10,7 +10,7 @@
       <span :style="{ fontSize: '18px' }">
         抽奖结果
       </span>
-      <span :style="{ fontSize: '14px', color: '#999', marginLeft: '10px' }">
+      <span :style="{ fontSize: '12px', color: '#999', marginLeft: '10px' }">
         (点击号码可以删除)
       </span>
     </div>
@@ -109,7 +109,7 @@ export default {
   }
 };
 </script>
-<style lang="scss">
+<style lang="less">
 .c-Result {
   .el-dialog__body {
     max-height: 500px;
@@ -143,10 +143,12 @@ export default {
       &:hover {
         &::before {
           content: '删除';
+          font-size: 0.8em;
           width: 100%;
           height: 100%;
           background-color: #ccc;
           position: absolute;
+          display: inline-block;
           left: 0;
           top: 0;
           color: red;

src/components/Tool.vue

@@ -9,9 +9,9 @@
     <el-button size="mini" @click="showImport = true">
       导入名单
     </el-button>
-    <el-button size="mini" @click="showImportphoto = true">
+    <!-- <el-button size="mini" @click="showImportphoto = true">
       导入照片
-    </el-button>
+    </el-button> -->
     <el-dialog
       :append-to-body="true"
       :visible.sync="showSetwat"
@@ -117,7 +117,7 @@
             <el-radio border :label="0">重置全部数据</el-radio>
             <el-radio border :label="1">重置抽奖配置</el-radio>
             <el-radio border :label="2">重置名单</el-radio>
-            <el-radio border :label="3">重置照片</el-radio>
+            <!-- <el-radio border :label="3">重置照片</el-radio> -->
             <el-radio border :label="4">重置抽奖结果</el-radio>
           </el-radio-group>
         </el-form-item>
@@ -327,7 +327,7 @@ export default {
   }
 };
 </script>
-<style lang="scss">
+<style lang="less">
 #tool {
   position: fixed;
   width: 60px;

src/helper/algorithm.js

@@ -39,9 +39,18 @@ export function luckydrawHandler(total, won = [], num) {
   const res = [];
   for (let j = 0; j < num; j++) {
     const nodraws = peolist.filter(item => !wons.includes(item));
-    const current = nodraws[randomNum(1, nodraws.length) - 1];
+    const current = nodraws[randomLuckyNum(nodraws.length)];
     res.push(current);
     wons.push(current);
   }
   return res;
 }
+
+function randomLuckyNum(maxNum)
+{
+  let arr = new Uint16Array(2);
+  window.crypto.getRandomValues(arr);
+  let num = arr[0];
+  num = num % maxNum;
+  return num;
+}

src/main.js

@@ -3,7 +3,7 @@ import App from './App.vue';
 import router from './router';
 import store from './store';
 import Element from 'element-ui';
-import '@/assets/style/index.scss';
+import '@/assets/style/index.less';
 import 'element-ui/lib/theme-chalk/index.css';
 import '@/assets/lib/tagcanvas.js';
 Vue.config.productionTip = false;

vue.config.js

 module.exports = {
-  publicPath: process.env.NODE_ENV === 'production' ? '/lucky-draw' : '/'
+  publicPath: process.env.NODE_ENV === 'production' ? '/lucky-draw' : '/',
+  devServer:{
+    open:true
+  },
+  configureWebpack:config=>{
+    config.devtool = 'source-map'
+  },
+  css:{
+    sourceMap:true
+  }
 };