I got simple rollup.config.js - everything seems fine to me and should work as I intend it (in the topic title), but only js file getting injected into html. Please help, tried tons of different packages already like rollup-plugin-postcss, rollup-plugin-styles, rollup-plugin-scss, rollup-plugin-sass, and result is always the same - only js injected, and not css.
rollup.config.js
import path from 'path';
import html from '@rollup/plugin-html';
import url from '@rollup/plugin-url';
import { babel } from '@rollup/plugin-babel';
import image from '@rollup/plugin-image';
import resolve from '@rollup/plugin-node-resolve';
import clear from 'rollup-plugin-clear';
import commonjs from '@rollup/plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import paths from './config/paths';
import { babelExtensions, extensions } from './config/extensions';
// const customResolver = resolve({
// extensions,
// });
export default {
input: { login: paths.appLoginIndexJs },
output: {
sourcemap: true,
dir: paths.appBuild,
format: 'iife',
assetFileNames: '[name].[hash].[ext]',
entryFileNames: '[name].[hash].js',
},
plugins: [
commonjs(),
babel({
babelHelpers: 'bundled',
include: ['src/**/*'],
exclude: 'node_modules/**',
extensions: [...babelExtensions, '.html'],
}),
html(),
url({
include: ['**/*.bmp', '**/*.png', '**/*.jp(e)?g', '**/*.gif', '**/*.webp'],
filename: '[name].[hash:8].[ext]',
limit: 7000,
destDir: path.join(__dirname, 'build', paths.LOGIN_PUBLIC_URL, 'static/images'),
}),
url({
include: ['**/*.otf', '**/*.ttf', '**/*.eot', '**/*.woff', '**/*.woff2'],
filename: '[name].[hash:8].[ext]',
limit: 7000,
destDir: path.join(__dirname, 'build', paths.LOGIN_PUBLIC_URL, 'static/fonts'),
}),
image({
include: ['**/*.svg'],
}),
styles({
sourceMap: true,
config: { path: paths.appPostcssConfig },
mode: ['extract', 'login.css'],
sass: {
fibers: true,
},
inject: true,
}),
// postcss({ extract: true, config: false }),
resolve({
jsnext: true,
extensions,
}),
clear({
targets: ['build'],
}),
],
};
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Rollup Bundle</title>
</head>
<body>
<script src="login.893de293.js"></script>
</body>
</html>