Angular 4 CSS не рендерится после встряхивания дерева

Я использую плагин Rollup, чтобы сделать встряхивание дерева моего приложения Angular. Я получаю финал build.js и когда я проверяю это, CSS есть, но по какой-то причине он не отображается DOM.

я использую SCSS и все мои стили имеют .scss расширение

rollup-config.js

import rollup from 'rollup'
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin-uglify'
import scss from 'rollup-plugin-scss'

//paths are relative to the execution path
export default {
  input: 'src/main-aot.js',
  output: {
    file: 'aot/dist/build.js', // output a single application bundle
    format: 'iife',
  },
  sourcemap: true,
  sourcemapFile: 'aot/dist/build.js.map',
  onwarn: function (warning) {
    // Skip certain warnings

    // should intercept ... but doesn't in some rollup versions
    if (warning.code === 'THIS_IS_UNDEFINED') { return; }

    // console.warn everything else
    console.warn(warning.message);
  },
  plugins: [
    scss(),
    nodeResolve({ jsnext: true, module: true }),
    commonjs({
      include: ['node_modules/**']
    }),
    uglify()
  ]
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <base href="/">
    <title>Angular Tour of Heroes</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <script src="https://use.fontawesome.com/7bceea02f5.js"></script>

    <script src="shim.min.js"></script>
    <script src="zone.min.js"></script>
  </head>

  <body>
    <app-root>Loading...</app-root>
  </body>
  <script async src="dist/build.js"></script>
</html>
Источник

0 ответов

Другие вопросы по тегам