使用sass开发web-components组件

这篇具有很好参考价值的文章主要介绍了使用sass开发web-components组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

思路:借助chokidar监听变化,将scss编译成css后插入
同时执行chokidar监听和webpack server文章来源地址https://www.toymoban.com/news/detail-834648.html

    "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 => {
                // 添加样式后的css
                const 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();

到了这里,关于使用sass开发web-components组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【鸿蒙应用ArkTS开发系列】- Web组件使用讲解

    目录 一、Web组件介绍 二、创建组件 权限列表 三、设置样式和属性 四、添加事件和方法 五、访问本地Html 1、本地html文件创建 2、本地html文件加载 2、JS对象注入,Html使用JS对象调用客户端方法 3、客户端调用本地Html网页中的JS方法 使用鸿蒙的ArkUI框架开发鸿蒙应用的时候,官

    2024年02月07日
    浏览(50)
  • Vue动态组件 component :is的使用

    vue 动态组件用于实现在指定位置上,动态加载不同的组件,核心代码为: componentTag 为自定义的变量,将需要加载的组件名赋值给它,即可在component /标签出现的位置,渲染该组件。 src/page/component1.vue src/page/component2.vue src/page/component3.vue 点击按钮组件1 点击按钮组件2 点击按

    2024年02月02日
    浏览(41)
  • 探索Web开发的未来——使用KendoReact服务器组件

    Kendo UI是带有jQuery、Angular、React和Vue库的JavaScript UI组件的最终集合,无论选择哪种JavaScript框架,都可以快速构建高性能响应式Web应用程序。通过可自定义的UI组件,Kendo UI可以创建数据丰富的桌面、平板和移动Web应用程序。通过响应式的布局、强大的数据绑定、跨浏览器兼容

    2024年01月19日
    浏览(35)
  • vue组件库开发,webpack打包,发布npm

    做一个像elment-ui一样的vue组件库 那多好啊!这是我前几年就想做的 但webpack真的太难用,也许是我功力不够 今天看到一个视频,早上6-13点,终于实现了,呜呜 感谢视频的分享-来龙去脉-大家可以看这个视频:https://www.bilibili.com/video/BV1Zf4y1u75o?p=9vd_source=125d808bbbad2b8400f221b816a0

    2024年02月09日
    浏览(35)
  • uniapp开发小程序引入组件报错Component is not found in path

    在使用uniapp开发小程序时,由于分包遇到了一个问题,引入其他分包的组件时报错Component is not found in path  小程序报错  后来发现,引用其他包的资源都会报错,之前只知道分包不能使用主包资源,不知道分包之间的资源也不能共用。将需要的组件复制一份过来就行了。 经验

    2024年02月12日
    浏览(39)
  • Vue3中使用component :is 加载组件

    1.不使用setup语法糖,这种方式和vue2差不多,is可以是个字符串 2. 使用setup语法糖,这时候的is如果使用字符串会加载不出来,得使用组件实例 第一种方式 第二种方式

    2024年02月16日
    浏览(43)
  • vue3 使用defineAsyncComponent与component标签实现动态渲染组件

    内容有些啰嗦,内容记载了当时遇到了bug以及解决问题的思路。 业务场景简述: 前端做配置化组件,通过url内的唯一标识,请求后端sql 哪取页面配置信息,前端通过配置信息动态渲染查询表单,导出、表格,toolbar以及动态弹窗;该动态渲染组件的功能,就是渲染的toolbar内

    2024年02月05日
    浏览(55)
  • Svg使用和注册components文件夹内部全部为全局组件

    Vue2+Js中使用(vue只注册了Svg) 1. 安装插件 2. 封装Svg组件 3. 在assets/icons文件夹下创建index.js 4. vue.config.js 5. main.js中引入 Vue3+Ts中使用(一次性将components下的所有组件都注册了)  1.安装SVG依赖插件 2. 封装SvgIcon 3. 在src/components文件夹目录下创建一个index.ts文件:用于注册comp

    2024年02月13日
    浏览(32)
  • css开发技巧(部分结合sass使用)

    一、css 选择器 基础选择器 选择器 别名 说明 版本 常用 tag 标签选择器 指定类型的标签 1 √ #id ID 选择器 指定 id 的标签 1 √ .class 类选择器 指定类名的标签 1 √ * 通配选择器 所有类型的标签 2 √ div p 后代选择器 元素的所有后代元素 1 √ divp 子代选择器 所有父级是 div 元素

    2024年02月10日
    浏览(42)
  • 使用webpack5+TypeScript+npm发布组件库

            作为一只前端攻城狮,没有一个属于自己的组件库,那岂不是狮子没有了牙齿,士兵没有了武器,姑娘没有了大宝SOD蜜,你没有了我....         言归正传,下面将给大家介绍如何通过webpack5编译一个TS组件发布到NPM平台。         1、通过webpack5初始化一个typescript环

    2024年04月16日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包