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

当webpack运行babel-loader时，我已配置babel-css-in-js plugin以将css文件构建为./app/bundle.css。我需要将此文件注入由html-webpack-plugin生成的HTML文件。我曾尝试通过加载它的css-loader像：将css文件注入到使用HtmlWebpackPlugin生成的html文件的头部

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

来源

2016-11-10 vamsiampolu

你可以看看或只是使用魅力https://github.com/threepointone/glamour – skav

@skav什么魅力做我的内联样式，呈现在'样式标签'或作为'单独文件'？它会自动注入文件，还是我会被要求使用'ExtractTextPlugin' – vamsiampolu

我用'react-helmet'将'link'注入头部。寻找更好的解决方案虽然 – vamsiampolu

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

看看的.babelrc和index.js

来源

2016-11-10 21:11:15 vamsiampolu

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

回答

相关问题