0

我得到了简单的 rollup.config.js - 一切对我来说似乎都很好，应该可以按我的意愿工作（在主题标题中），但只有 js 文件被注入到 html 中。请帮忙，尝试了很多不同的包，比如 rollup-plugin-postcss、rollup-plugin-styles、rollup-plugin-scss、rollup-plugin-sass，结果总是一样的——只注入了 js，而不是 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'],
    }),
  ],
};

索引.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>
4

0 回答 0