Question

当webpack运行./app/bundle.css时，我已将babel-css-in-js plugin配置为在babel-loader中构建css文件。我需要将此文件注入由html-webpack-plugin生成的HTML文件中。我试过通过css-loader加载它，如：

import './bundle.css';

const styles = cssInJs({
  red: {
    color: 'white',
    backgroundColor: 'red',
  },
});

const redClass = cx(styles.red);

function HelloWorld() {
  return (<h2 className={redClass}><LoremIpsum /></h2>);
}

但是我收到了错误：

client?cb1f:75 ENOTSUP: operation not supported on socket,  
uv_interface_addresses
 @ ./app/index.js 17:0-23

 ./bundle.css not found

这是我的.babelrc：

["css-in-js", {
 "vendorPrefixes":true,
 "mediaMap":{
   "phone": "media only screen and (max-width: 768px)",
   "tablet":"media only screen and (max-width: 992px)",
   "desktop":"media only screen and (max-width: 1200px)"
 },
 "identifier": "cssInJs",
 "transformOptions":{
 "presets":["env"]
 },
   "bundleFile": "./app/bundle.css"
 }
]

html-webpack-plugin使用html-webpack-template进行配置，如下所示：

new HtmlWebpackPlugin({
  inject: false,
  mobile: true,
  appMountId: 'root',
  template,
}),

我是否可以使用任何其他机制将css file注入生成的模板的头部？

项目的来源位于github

Answer 1

我已使用react-helmet将外部样式表注入生成的html页面。首先，我从css-loader和我的模块webpack.config.js中删除了import ./bundle.css。我修改了.babelrc以将bundlePath的{{1}}更改为css目录。

然后我补充道：

build

我将以下内容添加到我的根组件中：

import Helmet from 'react-helmet';

const cssLink = {
  rel: 'stylesheet',
  type: 'text/css',
  href: './bundle.css',
};

该组件现在看起来像：

 <Helmet link={[cssLink]} />

查看.babelrc和index.js

将css文件注入使用HtmlWebpackPlugin生成的html文件的头部

1 个答案: