javascript - 如何在 VSCode 和 WebStorm 中将 CSS/SCSS/PostCSS 写入 React .tsx 文件作为 JavaScript 字符串？

Question

我正在尝试建立一个新的 self 约定来使我的 React 代码更好地组织，如下所示:

export default function HeaderExample() {
  const compStyle = getStyle();
  return (
    <>
      <h1>Hello World</h1>
      <style jsx>{compStyle}</style>
    </>
  )
}

function getStyle() {
  return `
        h1 {
          color: blue;
        }
      `
}

它工作正常，但在 getStyle() 中编写返回值非常困难，因为我没有从 IDE 获得格式化或语法高亮帮助。

我怎样才能得到这些？插件/库/设置/给它一个类型？这些都会有所帮助。

同时，您认为这会导致 future 出现任何问题吗？

Answer 1

WebStorm 具有内置功能语言注入(inject)。为此。

Here您会找到该功能的详细文档。

简短版。

1. 将光标放在相关代码块中，然后单击 alt + enter。

1. 在 DropDown 中，选择 Inject language or reference。不点击右侧，再次点击enter。

1. 应打开一个窗口，现在选择您要注入(inject)的语言。如果您选择 CSS，结果应该是:

回答你的第二个问题。它不应该在路上造成任何麻烦。

编辑添加:

可以通过注释 laguange=css 触发相同的行为