From f331b9773edec71a98e34591c2e506ae1a1b98f6 Mon Sep 17 00:00:00 2001 From: zhangjun1 Date: Sat, 25 Feb 2023 17:46:47 +0800 Subject: [PATCH] =?UTF-8?q?=E8=84=9A=E6=9C=AC=E7=AC=AC=E4=B8=80=E7=89=88?= =?UTF-8?q?=EF=BC=8C=E5=AE=8C=E6=88=90=E5=AF=B9src=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E5=A4=B9=E5=86=85=E7=9A=84scss=E6=96=87=E4=BB=B6=E5=81=9A?= =?UTF-8?q?=E5=A4=84=E7=90=86=EF=BC=8C=E5=B9=B6=E5=9C=A8=E5=AF=B9=E4=BA=8E?= =?UTF-8?q?=E7=9B=AE=E5=BD=95=E7=94=9F=E6=88=90=E5=90=8C=E5=90=8Dcss?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/main.js | 32 ++++++++++++++++++++ file.js | 71 +++++++++++++++++++++++++++++++++++++++++++ readFile.js | 50 +++++++++++++++++++++++++++++++ readFileCall.js | 76 +++++++++++++++++++++++++++++++++++++++++++++++ src/a.css | 4 --- src/aa/a.css | 3 ++ src/aa/a.scss | 3 ++ src/aa/bb/b.css | 3 ++ src/aa/bb/b.scss | 3 ++ src/b.scss | 6 ---- src/c.scss | 6 ---- src/index.js | 1 + src/sdk.css | 18 +++++++++++ src/sdk.scss | 33 ++++++++++++++++++++ webpack.config.js | 38 +++++++++++++++++------- 15 files changed, 320 insertions(+), 27 deletions(-) create mode 100644 dist/main.js create mode 100644 file.js create mode 100644 readFile.js create mode 100644 readFileCall.js delete mode 100644 src/a.css create mode 100644 src/aa/a.css create mode 100644 src/aa/a.scss create mode 100644 src/aa/bb/b.css create mode 100644 src/aa/bb/b.scss delete mode 100644 src/b.scss delete mode 100644 src/c.scss create mode 100644 src/index.js create mode 100644 src/sdk.css create mode 100644 src/sdk.scss diff --git a/dist/main.js b/dist/main.js new file mode 100644 index 0000000..cf5cc73 --- /dev/null +++ b/dist/main.js @@ -0,0 +1,32 @@ +/* + * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). + * This devtool is neither made for production nor for readable output files. + * It uses "eval()" calls to create a separate source file in the browser devtools. + * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) + * or disable the default devtool with "devtool: false". + * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). + */ +/******/ (() => { // webpackBootstrap +/******/ var __webpack_modules__ = ({ + +/***/ "./src/index.js": +/*!**********************!*\ + !*** ./src/index.js ***! + \**********************/ +/***/ (() => { + +eval("var a = 1\n\n//# sourceURL=webpack://scss-to-css/./src/index.js?"); + +/***/ }) + +/******/ }); +/************************************************************************/ +/******/ +/******/ // startup +/******/ // Load entry module and return exports +/******/ // This entry module can't be inlined because the eval devtool is used. +/******/ var __webpack_exports__ = {}; +/******/ __webpack_modules__["./src/index.js"](); +/******/ +/******/ })() +; \ No newline at end of file diff --git a/file.js b/file.js new file mode 100644 index 0000000..b6aecbb --- /dev/null +++ b/file.js @@ -0,0 +1,71 @@ +/** + * 读取一个目录中所有子目录和文件 + */ + const fs = require('fs') + const path = require('path') + + class File { + constructor(filename, name, ext, isFile, size, creeateTime, updateTime) { + this.filename = filename + this.name = name // 文件名 + this.ext = ext // 后缀 + this.isFile = isFile // 是否文件 + this.size = size // 文件大小 + this.creeateTime = creeateTime // 创建时间 + this.updateTime = updateTime // 更新时间 + } + + static async getFile(filename) { + const stat = await fs.promises.stat(filename) + const { size, birthtime, mtime } = stat + let name = path.basename(filename), + ext = path.extname(filename), + isFile = stat.isFile(), + creeateTime = new Date(birthtime), + updateTime = new Date(mtime); + return new File(filename, name, ext, isFile, size, creeateTime, updateTime) + } + + // 获取目录的所有子文件对象，如果是文件返回空数组 + async getChildren() { + if (this.isFile) { return [] } + let dirArr = await fs.promises.readdir(this.filename); + dirArr = dirArr.map(fileName => { + const filename = path.resolve(this.filename, fileName) + return File.getFile(filename) + }) + return Promise.all(dirArr) + } + + // 获取文件内容， 如果是目录，返回null + async getContent(isBuffer = false) { + if (!this.isFile) { return null } + if (isBuffer) { + return await fs.promises.readFile(this.filename) + } + return await fs.promises.readFile(this.filename, 'utf-8') + } + } + + async function readDir(dirname) { + const file = await File.getFile(dirname) + return await file.getChildren() + } + + const dirname = path.resolve(__dirname, '../src') + console.log(readDir(dirname)) + + async function test() { + const dirname = path.resolve(__dirname, '../src') + const filename = path.resolve(__dirname, './index.js') + + const dir = await File.getFile(dirname) + console.log('dir', await dir.getChildren()) + + const file = await File.getFile(filename) + console.log('file', file) + + } + test() + + \ No newline at end of file diff --git a/readFile.js b/readFile.js new file mode 100644 index 0000000..6f3937c --- /dev/null +++ b/readFile.js @@ -0,0 +1,50 @@ +/** + * 读取一个目录中所有子目录和文件 + */ + const fs = require('fs') + const path = require('path') + +var fileArr = [] + +var acceptFile = ['scss'] + +var getFile = async function(pathStr){ + let dirArr = await fs.promises.readdir(pathStr); + + console.log(dirArr); + + dirArr.forEach(e => { + //文件夹 + let str = pathStr+'/'+e + if(!isFile(str)){ + getFile(str) + }else{ + let fileType = str.split('.')[str.split('.').length-1] + if(acceptFile.indexOf(fileType)!==-1){ + fileArr.push({ + outputPath:pathStr+'/', + inputPath:str + }) + } + } + }); + } + + + var isFile = function(filename){ + var stat = fs.lstatSync(filename); + var isFile = stat.isFile() + return isFile +} + +module.exports = { + getFile, + fileArr, +} + + +getFile('./src') + +// setTimeout(()=>{ +// console.log(fileArr); +// },5000) \ No newline at end of file diff --git a/readFileCall.js b/readFileCall.js new file mode 100644 index 0000000..ead20b5 --- /dev/null +++ b/readFileCall.js @@ -0,0 +1,76 @@ +/** + * 读取一个目录中所有子目录和文件 + */ + const fs = require('fs') + const path = require('path') + +var fileArr = [] + +var acceptFile = ['scss'] + +var getFile = function(pathStr,cb){ + fs.readdir(pathStr,function(err,dirArr){ + console.log(dirArr); + + dirArr.forEach(e => { + //文件夹 + let str = pathStr+'/'+e + if(!isFile(str)){ + getChildernFile(str) + }else{ + let fileType = str.split('.')[str.split('.').length-1] + if(acceptFile.indexOf(fileType)!==-1){ + fileArr.push({ + outputPath:pathStr+'/', + inputPath:str + }) + } + } + }); + + cb?cb():'' + }); + } + + var getChildernFile = function(pathStr){ + fs.readdir(pathStr,function(err,dirArr){ + console.log(dirArr); + + dirArr.forEach(e => { + //文件夹 + let str = pathStr+'/'+e + if(!isFile(str)){ + getFile(str) + }else{ + let fileType = str.split('.')[str.split('.').length-1] + if(acceptFile.indexOf(fileType)!==-1){ + fileArr.push({ + outputPath:pathStr+'/', + inputPath:str + }) + } + } + }); + }); + } + + + var isFile = function(filename){ + var stat = fs.lstatSync(filename); + var isFile = stat.isFile() + return isFile +} + +module.exports = { + getFile, + fileArr, +} + + +getFile('./src',function(){ + console.log(fileArr); +}) + +// setTimeout(()=>{ +// console.log(fileArr); +// },5000) \ No newline at end of file diff --git a/src/a.css b/src/a.css deleted file mode 100644 index a886be7..0000000 --- a/src/a.css +++ /dev/null @@ -1,4 +0,0 @@ -.aa{ - height: 100px; - background-color: #fff; -} \ No newline at end of file diff --git a/src/aa/a.css b/src/aa/a.css new file mode 100644 index 0000000..ce0d73b --- /dev/null +++ b/src/aa/a.css @@ -0,0 +1,3 @@ +.aaa { + width: 100px; } + diff --git a/src/aa/a.scss b/src/aa/a.scss new file mode 100644 index 0000000..604d638 --- /dev/null +++ b/src/aa/a.scss @@ -0,0 +1,3 @@ +.aaa{ + width: 100px; +} \ No newline at end of file diff --git a/src/aa/bb/b.css b/src/aa/bb/b.css new file mode 100644 index 0000000..e918fa0 --- /dev/null +++ b/src/aa/bb/b.css @@ -0,0 +1,3 @@ +.bs { + color: #000; } + diff --git a/src/aa/bb/b.scss b/src/aa/bb/b.scss new file mode 100644 index 0000000..28396a8 --- /dev/null +++ b/src/aa/bb/b.scss @@ -0,0 +1,3 @@ +.bs{ + color: #000; +} \ No newline at end of file diff --git a/src/b.scss b/src/b.scss deleted file mode 100644 index fec517a..0000000 --- a/src/b.scss +++ /dev/null @@ -1,6 +0,0 @@ -.aa{ - width: 100px; - .bb{ - height: 100px; - } -} \ No newline at end of file diff --git a/src/c.scss b/src/c.scss deleted file mode 100644 index b48c0d7..0000000 --- a/src/c.scss +++ /dev/null @@ -1,6 +0,0 @@ -.cc{ - margin: 0; - .dd{ - padding: 0; - } -} \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..eabcd42 --- /dev/null +++ b/src/index.js @@ -0,0 +1 @@ +var a = 1 \ No newline at end of file diff --git a/src/sdk.css b/src/sdk.css new file mode 100644 index 0000000..b8c8e7e --- /dev/null +++ b/src/sdk.css @@ -0,0 +1,18 @@ +.v-divider { + webkit-transform: scale(1, 0.5); + transform: scale(1, 0.5); } + .v-divider--vertical { + webkit-transform: scale(0.5, 1); + transform: scale(0.5, 1); } + +.theme--light.v-divider { + background-color: #ebedf0; + border-width: 0; + height: 1px; + max-height: 1px; } + .theme--light.v-divider--vertical { + background-color: #ebedf0; + border-width: 0; + width: 1px; + max-width: 1px; } + diff --git a/src/sdk.scss b/src/sdk.scss new file mode 100644 index 0000000..cf13b65 --- /dev/null +++ b/src/sdk.scss @@ -0,0 +1,33 @@ + +@mixin scale($x,$y){ + webkit-transform: scale($x,$y); + transform: scale($x,$y); +} + +@mixin scaleX($val){ + webkit-transform: scaleX($val); + transform: scaleX($val); +} + +.v-divider{ + @include scale(1,0.5) + &--vertical{ + @include scale(0.5,1) + } +} + +.theme--light{ + &.v-divider{ + background-color:#ebedf0; + border-width:0; + height: 1px; + max-height: 1px; + + &--vertical{ + background-color:#ebedf0; + border-width:0; + width: 1px; + max-width: 1px; + } + } +} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 257ace7..04ec5f0 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,6 +2,9 @@ const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const entry = require('webpack-glob-entry') const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries"); +const {getFile,fileArr} = require('./readFile'); + +getFile('./src') const baseConfig = { module : { @@ -20,15 +23,28 @@ const baseConfig = { path: path.resolve(__dirname, './'), }, } -module.exports = [ - { - ...baseConfig, - entry: entry('./src/*.scss'), - plugins: [ - new FixStyleOnlyEntriesPlugin(), - new MiniCssExtractPlugin({ - filename: 'css/[name].css' //css打包输出出口及文件名称 + +var useArr = [] + + +//暂时没想到好的办法处理异步递归完成的时间问题，延时5s进行打包 +module.exports = new Promise((resolve,reject)=>{ + setTimeout(() => { + console.log(fileArr); + fileArr.forEach(e => { + useArr.push({ + ...baseConfig, + entry: entry(e.inputPath), + plugins: [ + new FixStyleOnlyEntriesPlugin(), + new MiniCssExtractPlugin({ + filename: e.outputPath+'/[name].css' //css打包输出出口及文件名称 + }) + ], }) - ], - } -]; \ No newline at end of file + }); + + resolve(useArr) + + }, 5000); +}) -- 2.26.0