注射CSS文件转换成HTML文件的头部使用HtmlWebpackPlugin产生

问题描述 投票:0回答:1

我已经配置了babel-css-in-js plugin建立一个css文件到./app/bundle.css时的WebPack运行babel-loader。我需要这个文件注入到被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-插件使用了这样的配置html-webpack-template

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

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

该项目的来源是github

javascript css webpack babeljs html-webpack-plugin
1个回答
0
投票

我已经使用react-helmet注入外部样式表到生成的HTML页面。首先,我删除从css-loaderwebpack.config.js从我模块import ./bundle.css。我编辑我的.babelrcbundlePathcss更改为build目录。

然后我说:

import Helmet from 'react-helmet';

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

添加以下到我的根组件:

 <Helmet link={[cssLink]} />

该组件现在看起来像:

function HelloWorld() {
  return (<h2 className={redClass}>
    <Helmet link={[cssLink]} />
    <LoremIpsum />
  </h2>);
}

看看在.babelrcindex.js

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.