search

devlocker / breakfast

Brunch.io with Rails
MIT License
96 stars 11 forks source link

Sass #17

Closed koriroys closed 7 years ago

koriroys commented 7 years ago

Hello! Is there something special I need to configure to get in-template sass/scss to work?

Trying this currently:

<style lang="scss">
li
  color: red
</style>

but the error is: error: Compiling of app/frontend/js/components/video-tags.vue failed. Error: Invalid CSS after "": expected 1 selector or at-rule, was "li"

Cheers.

PatKoperwas commented 7 years ago

I'm assuming this is for a .vue file?

If that's the case here's what you'll need.

// Make sure the latest version of vue-brunch is installed
yarn upgrade vue-brunch

// In your brunch-config.js add the following in the plugins section
plugins: {
  // other plugins...
  vue: {
    sass: {
      indentedSyntax: true
    }
  }
}
PatKoperwas commented 7 years ago

By default the scss / sass compiler assumes the scss syntax, so instead of 

li
  color: red
li {
  color: red
}

The indentedSyntax option just tells the compiler to process using the SASS syntax

koriroys commented 7 years ago

@PatKoperwas Yes it's for a .vue single file component. I should have specified that better.

Wow, didn't even realize indentedSyntax was a thing. Thank you, works great now. I figured it wasn't actually a bug, but something simple that you might know off the top of your head.

Thanks again mate.