读取css文件

在浏览器环境中，fs.readFile 不可用，因为它是Node.js的文件系统模块，无法直接在浏览器中使用。如果你要在浏览器中执行这种操作，你可以使用其他方法来加载CSS文件，例如使用XMLHttpRequest 或 Fetch API 来获取CSS文件内容。

这是一个示例，如何在浏览器环境中获取CSS文件内容并解析类名：

// parseCss.js

function parseCss() {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'your-css-file.css', true);
    xhr.onload = function () {
      if (xhr.status === 200) {
        const cssContent = xhr.responseText;
        const regex = /\.(a-|tums-)[a-zA-Z0-9_-]+/g;
        const matchedClassNames = cssContent.match(regex);

        if (matchedClassNames) {
          // 去除类名前的点号，存储在数组中
          const cleanedClassNames = matchedClassNames.map(className => className.replace('.', ''));
          resolve(cleanedClassNames);
        } else {
          resolve([]);
        }
      } else {
        reject('无法加载CSS文件');
      }
    };
    xhr.send();
  });
}

export default parseCss;

在你的Vue组件中，你可以导入这个模块并使用它来获取匹配的类名：

// YourVueComponent.vue

<template>
  <div>
    <!-- Your Vue component template -->
  </div>
</template>

<script>
import parseCss from './parseCss'; // 替换为实际的路径

export default {
  async created() {
    try {
      // 调用parseCss函数来获取匹配的类名
      const matchedClassNames = await parseCss();
      console.log('匹配的类名:', matchedClassNames);
    } catch (error) {
      console.error('发生错误:', error);
    }
  }
};
</script>

这个示例中，我们使用XMLHttpRequest来获取CSS文件的内容。在Vue组件中，我们使用async/await来处理异步操作，并在控制台中打印匹配的类名。确保将’your-css-file.css’替换为你的CSS文件的路径。