我已经配置了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
我已经使用react-helmet
注入外部样式表到生成的HTML页面。首先,我删除从css-loader
的webpack.config.js
从我模块import ./bundle.css
。我编辑我的.babelrc
到bundlePath
的css
更改为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>);
}