H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端问题精选】从tsx源码抽离出CSS文件,怎么通过 style-loader 等进行处理?

我的需求是从 tsx 代码中抽离样式到独立的 css 文件,再把样式文件经过 style-loader, css-loader 等进行处理。

目前我开发了一个 loader,做到了解析修改源码和生成 css 内容

export default function (source) {
  const webpackEnv = this
  
  // 修改源码,抽离 css
  const { code, css } = transform(source)
  
  // 获取输出路径
  const context = webpackEnv.rootContext
  const outputPath = interpolateName(webpackEnv, '[contenthash].[ext]',
    {
      context,
      content: source
    }
  )
  
  // TODO: 将 css 文件经过 style-loader 处理
  webpackEnv.emitFile(outputPath, css)
  
  // 返回源码
  return code
}

我遇到的是问题是:
1、调用 webpack 的 emitFile api 没有生成 css 文件
2、怎么将生成的文件通过 style-loader, css-loader 处理
3、怎么将处理后的文件链接到 html 文件中

本文地址:H5W3 » 【前端问题精选】从tsx源码抽离出CSS文件,怎么通过 style-loader 等进行处理?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址