如何使用import语句直接获取webpack打包中CSS文件的字符串内容

解决方案 #

你当前的需求可以通过两种合法的import语法实现，对应不同的使用场景： #

1. 直接导入默认导出（最简洁）

你的原代码里require(csspath).default拿到的就是CSS模块的默认导出值，对应import语法可以直接绑定默认导出：

import cssDefaultExport from 'highlight.js/styles/atelier-dune-light.css'
const theCss = cssDefaultExport.toString()
console.log(theCss)

2. 命名空间导入（你之前写法的修正版）

你之前用import * as的写法是可行的，只是漏了访问命名空间对象下的default属性：

import * as swatchCssWrapper from 'highlight.js/styles/atelier-dune-light.css'
const theCss = swatchCssWrapper.default.toString()

可选优化 #

如果你的项目使用css-loader v6及以上版本，可以修改loader配置，直接导出纯CSS字符串，不需要额外调用toString：

// webpack.config.js 对应规则配置
{
  test: /\.css$/i,
  loader: 'css-loader',
  options: {
    exportType: 'string',
    esModule: true
  }
}

配置完成后可以直接导入使用：

import theCss from 'highlight.js/styles/atelier-dune-light.css'
// 直接使用theCss，已经是纯字符串

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