增加scss注入的支持

lib/compile-vue.js

@@ -27,8 +27,7 @@ import {
 } from './constants.js'
 
 const OPTIONS = {
-  indentType: 'space',
+  style: 'compressed'
-  indentWidth: 2
 }
 
 // 修正路径合并 避免在windows下被转义
@@ -102,18 +101,16 @@ function scopeCss(css = '', hash) {
 /**
  * 编译scss为css
  * @param file <String> 文件路径或scss代码
- * @param mini <Boolean> 是否压缩
+ * @param inject <String> 要注入的scss代码
  */
-export function compileScss(file, mini = true) {
+export function compileScss(file, inject = '') {
-  let style = mini ? 'compressed' : 'expanded'
   try {
     if (fs.isfile(file)) {
-      return scss.compile(file, { style, ...OPTIONS }).css.trim()
+      return scss.compile(file, OPTIONS).css.trim()
     } else {
-      return scss.compileString(file, { style, ...OPTIONS }).css.trim()
+      return scss.compileString(inject + file, OPTIONS).css.trim()
     }
   } catch (err) {
-    // console.log('compile scss: ', file)
     console.error(err)
   }
 }
@@ -283,14 +280,14 @@ export function compileVue(file, imports, options = {}) {
     .map(it => {
       let css
       if (it.length > 2) {
-        css = compileScss(it[2])
+        css = compileScss(it[2], options.INJECT_SCSS)
 
         if (it[1].includes('scoped')) {
           scoped = true
           css = scopeCss(css, hash)
         }
       } else {
-        css = compileScss(it[1])
+        css = compileScss(it[1], options.INJECT_SCSS)
       }
       return css
     })

lib/dev.js

@@ -18,6 +18,10 @@ const noc = Buffer.from('')
 const SERVER_OPTIONS = {}
 const CACHE = {} //文件缓存, 用于hmr
 
+function readFile(file) {
+  return (file && fs.cat(file)?.toString()) || ''
+}
+
 export default async function createServer(root = '', conf = {}) {
   const SOURCE_DIR = join(root, 'src')
   const PUBLIC_DIR = join(root, 'public')
@@ -26,6 +30,7 @@ export default async function createServer(root = '', conf = {}) {
   const PORT = conf.devServer.port || 8080
   const USE_HTTPS = conf.devServer.https
   const DOMAIN = conf.devServer.domain || 'localhost'
+  const INJECT_SCSS = readFile(conf.inject?.scss)
 
   if (USE_HTTPS) {
     Object.assign(SERVER_OPTIONS, conf.devServer.ssl)
@@ -185,7 +190,8 @@ export default async function createServer(root = '', conf = {}) {
                 currentPage,
                 SOURCE_DIR,
                 CACHE,
-                DEPLOY_PATH
+                DEPLOY_PATH,
+                INJECT_SCSS
               })
 
               res.setHeader('content-type', MIME_TYPES.js)
@@ -326,7 +332,15 @@ export default async function createServer(root = '', conf = {}) {
                 case 'css':
                 case 'scss':
                   {
-                    let content = fs.cat(filePath).toString()
+                    let content = ''
+                    if (filePath === conf.inject?.scss) {
+                      return
+                    }
+                    if (ext === 'scss') {
+                      content = compileScss(filePath)
+                    } else {
+                      content = fs.cat(filePath).toString()
+                    }
                     ws.send({
                       action: 'render',
                       data: { path: file.replace(/\\/g, '/'), content }
@@ -341,7 +355,8 @@ export default async function createServer(root = '', conf = {}) {
                       currentPage,
                       SOURCE_DIR,
                       CACHE,
-                      DEPLOY_PATH
+                      DEPLOY_PATH,
+                      INJECT_SCSS
                     })
                     let tmp = CACHE[filePath]
                     if (tmp.changed) {

lib/prod.js

@@ -3,6 +3,10 @@ import { join, dirname, parse } from 'path'
 import Es from 'esbuild'
 import { compileScss, parseJs, compileVue, parseHtml } from './compile-vue.js'
 
+function readFile(file) {
+  return (file && fs.cat(file)?.toString()) || ''
+}
+
 export default function compile(root = '', dist = '', conf = {}) {
   //
   const SOURCE_DIR = join(root, 'src')
@@ -10,6 +14,7 @@ export default function compile(root = '', dist = '', conf = {}) {
   const DEPLOY_PATH = conf.base || '' // 部署目录, 默认是根目录部署
   const IS_MPA = Object.keys(conf.pages).length > 1
   const PAGES_PREFIX = Object.keys(conf.pages).map(it => `pages/${it}/`)
+  const INJECT_SCSS = readFile(conf.inject?.scss)
 
   let timeStart = Date.now()
   let template = fs.cat(join(process.env.PWD, 'index.html')).toString()
@@ -31,14 +36,14 @@ export default function compile(root = '', dist = '', conf = {}) {
           }
         }
 
-        return true
+        return it.path !== conf.inject?.scss
       }
 
       return false
     })
 
   let compileFiles = function (currentPage, page, files) {
-    let options = { IS_MPA, currentPage, SOURCE_DIR, DEPLOY_PATH }
+    let options = { IS_MPA, currentPage, SOURCE_DIR, DEPLOY_PATH, INJECT_SCSS }
 
     for (let it of files) {
       // 入口文件, 特殊处理

package.json

@@ -1,7 +1,7 @@
 {
   "name": "fite",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "bin": {
     "fite": "index.js"
   },