使用sass开发web-components组件

news/2024/4/25 20:16:35

思路:借助chokidar监听变化,将scss编译成css后插入
同时执行chokidar监听和webpack server

    "start": "npm run watch:css & webpack serve","watch:css" : "node chokidarStyles.js",
// chokidarStyles.js
const fs = require('fs');
const path = require('path');
const chokidar = require('chokidar');
const sass = require('sass');
const autoprefixer = require('autoprefixer');
const postcss = require('postcss');// 要监听的文件或目录路径
const filePath = './src/styles.scss';
const templatePath = './src/ComponentLoadingTemplate.ts';// 监听文件或目录变化
const watcher = chokidar.watch(filePath);const changeCss = () => {// 编译 SCSS 文件const scssFilePath = path.resolve(__dirname, filePath);try {const result = sass.renderSync({file: scssFilePath, outputStyle: 'expanded'});const cssContent = result.css.toString();// 浏览器兼容postcss([autoprefixer({overrideBrowserslist: ['last 30 versions', '> 0.5%', 'Firefox ESR', 'not dead']})]).process(cssContent, {from: undefined}).then(_result => {// 添加样式后的cssconst prefixedCss = _result.css;// 读取模板文件const templateContent = fs.readFileSync(templatePath, 'utf-8');const regex = /<style>([\s\S]*?)<\/style>/;const cssText = templateContent.match(regex);if (cssText && cssText[1] !== prefixedCss) {// 将 CSS 内容插入模板中const modifiedTemplateContent = templateContent.replace(regex, `<style>${prefixedCss}</style>`);// 更新输出文件const outputFilePath = path.resolve(__dirname, templatePath);fs.writeFileSync(outputFilePath, modifiedTemplateContent);}}).catch(error => {console.error('Error processing CSS:', error);});} catch (e) {console.log(e);}
}// 监听文件或目录变化事件
watcher.on('change', (path) => {console.log(`File ${path} has been changed`);changeCss();
});watcher.on('add', (path) => {console.log(`File ${path} has been added`);
});watcher.on('unlink', (path) => {console.log(`File ${path} has been removed`);
});// 监听错误事件
watcher.on('error', (error) => {console.error(`Watcher error: ${error}`);
});// 在需要的时候停止监听
// watcher.close();

https://www.xjx100.cn/news/3280741.html

相关文章

项目的一些难点

1.不用redis?分布式锁&#xff0c;如何防止用户重复点击&#xff1f; 1.乐观锁 乐观锁是一种在数据库层面上避免并发冲突的机制。它通常通过在数据库记录中添加一个版本号&#xff08;或时间戳&#xff09;来实现。每次更新记录时&#xff0c;都会检查版本号是否与数据库中的…

uniapp上传文件到腾讯云

官方API地址 javaScript_SDK 下载cos npm i cos-js-sdk-v5 --save 生成签名 获取secretId和secretKey let cos new COS({SecretId: *******************************,SecretKey: ******************************,}) 参考文章&#xff1a;腾讯云如何获取secretId和secret…

android framework - startActivity

这里写自定义目录标题 前言源码 前言 相信应用开发对startActivity这个调用接口都不陌生&#xff0c;知道其能够跳转页面&#xff0c;然而&#xff0c;其具体是怎么跳转的&#xff0c;以及跳转关联的页面生命周期又是如何变化的&#xff0c;之前一直是知其然而不知其所以然&am…

【MySQL】Navicat/SQLyog连接Ubuntu中的数据库(MySQL)

&#x1f3e1;浩泽学编程&#xff1a;个人主页 &#x1f525; 推荐专栏&#xff1a;《深入浅出SpringBoot》《java对AI的调用开发》 《RabbitMQ》《Spring》《SpringMVC》 &#x1f6f8;学无止境&#xff0c;不骄不躁&#xff0c;知行合一 文章目录 前言一、安装…

【c#实现用户连续按下指定按键后执行关闭窗口】

想实现在用户连续按下例如 “abc” 键时执行关闭窗口的操作&#xff0c;可以修改代码以检测用户按键序列是否为 “abc”。以下是一个示例代码&#xff1a; using System; using System.Windows.Forms;namespace ThreeKeyPressCloseExample {public partial class MainForm : F…

线阵相机参数介绍之轴编码器控制

1.1 功能介绍 编码器是将检测对象的运动与相机拍摄取图相匹配的设备&#xff0c;也即检测对象运动一定距离&#xff0c;相机就拍摄一定行高的图像。 编码器会将检测对象的实际位移转换为固定数量电信号。例如&#xff1a;编码器的精度是2000p/r,该参数的含义是编码器每转一圈输…

摄像设备+nginx+rtmp服务器

前言 由于html中的video现在不支持rtmp协议(需要重写播放器框架&#xff0c;flash被一刀切&#xff0c;360浏览器还在支持flash),遂用rtmp作为桥梁,实际是hls协议在html中起作用. 在此推荐一款前端播放器,.ckplayer 简直了,写点页面,一直循环&#xff0c;洗脑神曲 dream it po…

PPT怎么输出PDF(不留白)

1、首先选中所有元素&#xff0c;右键点击“组合”形成一个对象。然后查看该对象的高度和宽度。 2、在设计->自定义->幻灯片大小中-->选择“自定义”&#xff0c;然后修改高度和宽度稍稍大于选中对象的值。点击“最大化”。 3、输出为PDF即可