Sass building error (sass parsed by scss rules)

[mubaidr]

Plugin is trying to parse sass file using scss rules. How to correct this Behaviour?

Error: Invalid CSS after "...on keyframes */": expected 1 selector or at-rule, was ".animate-warn" Solution: fix your Sass code

Using latest rollup and plugin version.

config:

plugins: [
      copy({
        'src/renderer/index.html': 'dist/renderer/index.html',
        'src/renderer/assets': 'dist/renderer/assets',
      }),
      builtins(),
      resolve(),
      commonjs(),
      vue({
        css: false,
      }),
      scss({
        output: 'dist/renderer/index.css',
      }),
      css(),
      typescript(),
      babel({
        exclude: 'node_modules/**',
      }),
      production &&
        minify({
          comments: false,
        }),
    ],

Sample sass code:

/* Animation keyframes */
.animate-warn
  animation-delay: 1s
  animation-duration: 5s
  animation-fill-mode: both
  animation-iteration-count: infinite
  animation-name: jump
  transform-origin: 50%
  will-change: transform
  -webkit-animation-duration: 5s
  -webkit-animation-fill-mode: both
  -webkit-animation-name: jump

[mubaidr]

Options are passed to node-sass.

Adding indentedSyntax: true, to the options fixed the issue.

[frederikhors]

@mubaidr can I ask you what are you using for minify scss?

[mubaidr]

Use these settings for rollup-plugin-scss plugin to enable minificaiton of output:

scss({
        output: 'dist/renderer/index.css',
        outputStyle: 'compressed' or 'expanded',
      }),

[frederikhors]

@mubaidr I switched to postcss. But thanks!