要使用Rollup的rollup-plugin-postcss插件来将CSS注入到head中,可以按照以下步骤进行修改。
首先,确保已经安装了必要的依赖:
npm install rollup rollup-plugin-postcss postcss
接下来,创建一个rollup.config.js文件并添加以下代码:
import postcss from 'rollup-plugin-postcss';
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'esm',
},
plugins: [
postcss({
extract: true, // 将CSS提取到单独的文件中
inject: false, // 不将CSS注入到head中
plugins: [],
}),
],
};
上述代码中,我们设置了extract为true,这将会将CSS提取到一个单独的文件中。而inject设置为false,这样就不会将CSS注入到head中。你还可以根据需要添加其他postcss插件到plugins数组中。
最后,运行以下命令来构建打包文件:
rollup -c
这样就会生成一个dist目录,其中包含了bundle.js和单独的CSS文件。
这样就完成了将CSS注入到head中的Rollup 'rollup-plugin-postcss'进行修改的解决方法。