Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.1k views
in Technique[技术] by (71.8m points)

从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 文件中


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...