思路:借助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();
文章来源:https://www.toymoban.com/news/detail-834648.html
到了这里,关于使用sass开发web-components组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!