如何从@monaco-editor/react获取SCSS编译后的CSS代码？

要实现这个需求，你需要借助SCSS编译库（比如sass）在客户端将编辑器中的SCSS代码编译为CSS，具体步骤如下：

1. 安装SCSS编译库 #

首先安装官方推荐的sass包（node-sass已停止维护）：

npm install sass
# 或
yarn add sass

2. 修改组件代码实现编译逻辑 #

在你的组件中导入sass，并在handleEditorChange中添加编译逻辑：

import { useRef } from 'react';
import Editor from '@monaco-editor/react';
import sass from 'sass';

const YourComponent = () => {
  const editorRef = useRef(null);
  // 示例file对象，根据实际业务替换
  const file = { name: 'demo.scss', language: 'scss', value: '$primary: #2c3e50; .container { background: $primary; }' };
  const height = '600px';

  function handleEditorDidMount(editor, monaco) {
    editorRef.current = editor;
  }

  function handleEditorChange() {
    const scssCode = editorRef.current.getValue();
    
    try {
      // 编译SCSS字符串为CSS
      const compileResult = sass.compileString(scssCode);
      const compiledCss = compileResult.css;
      
      // 这里可以使用编译后的CSS，比如预览、保存等
      console.log('编译完成的CSS:', compiledCss);
    } catch (err) {
      // 捕获SCSS语法错误，提示用户
      console.error('SCSS编译失败:', err.message);
    }
  }

  return (
    <Editor
      height={height}
      path={file.name}
      defaultLanguage={file.language}
      defaultValue={file.value}
      theme="vs-dark"
      onMount={handleEditorDidMount}
      onChange={handleEditorChange}
    />
  );
};

export default YourComponent;

注意事项 #

• 版本兼容：如果你使用的是sass旧版本（v1.63以下），需要用renderSync替代compileString：

  const result = sass.renderSync({ data: scssCode });
  const compiledCss = result.css.toString();
  

• 性能优化：如果编辑器内容频繁变化，建议给handleEditorChange添加防抖处理，避免每次输入都触发编译，减少性能消耗：

  import { useCallback, useRef } from 'react';
  
  // ...
  
  const debounceTimer = useRef(null);
  function handleEditorChange() {
    const scssCode = editorRef.current.getValue();
    
    if (debounceTimer.current) clearTimeout(debounceTimer.current);
    debounceTimer.current = setTimeout(() => {
      try {
        const compileResult = sass.compileString(scssCode);
        console.log('编译完成的CSS:', compileResult.css);
      } catch (err) {
        console.error('SCSS编译失败:', err.message);
      }
    }, 500);
  }
  

• 错误处理：编译过程中要捕获语法错误，避免因无效SCSS导致组件崩溃，你可以将错误信息展示给用户，提升体验。

内容的提问来源于stack exchange，提问作者Hunter