javascript - Injecting css file into head of html file generated using HtmlWebpackPlugin -
i have configured babel-css-in-js plugin build css file ./app/bundle.css when webpack runs babel-loader. need inject file html file generated html-webpack-plugin. have tried loading through css-loader like:
import './bundle.css'; const styles = cssinjs({ red: { color: 'white', backgroundcolor: 'red', }, }); const redclass = cx(styles.red); function helloworld() { return (<h2 classname={redclass}><loremipsum /></h2>); } but error:
client?cb1f:75 enotsup: operation not supported on socket, uv_interface_addresses @ ./app/index.js 17:0-23 ./bundle.css not found this .babelrc:
["css-in-js", { "vendorprefixes":true, "mediamap":{ "phone": "media screen , (max-width: 768px)", "tablet":"media screen , (max-width: 992px)", "desktop":"media screen , (max-width: 1200px)" }, "identifier": "cssinjs", "transformoptions":{ "presets":["env"] }, "bundlefile": "./app/bundle.css" } ] the html-webpack-plugin uses html-webpack-template configuration this:
new htmlwebpackplugin({ inject: false, mobile: true, appmountid: 'root', template, }), are there other mechanisms can use inject css file head of generated template?
the source of project on github
i have injected external stylesheet generated html page using react-helmet. first, removed css-loader webpack.config.js , import ./bundle.css module. edited .babelrc change bundlepath of css build directory.
then added:
import helmet 'react-helmet'; const csslink = { rel: 'stylesheet', type: 'text/css', href: './bundle.css', }; i added following root component:
<helmet link={[csslink]} /> the component looks like:
function helloworld() { return (<h2 classname={redclass}> <helmet link={[csslink]} /> <loremipsum /> </h2>); }
Comments
Post a Comment