BENderIsGr8te's avatar

Vue Component with SASS styling not compiling

I'm new to the world of Vue. I have a basic vue component setup based on the Laracast tutortial. However, I'm attempting to use sass in my component file and I keep getting a parsing error. If I use full blown css then it works fine, it's only when I use SASS it doesn't work.

Here's an example of what my .vue file looks like.

<template>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 search-result-container" v-for="hit in results.hits">
        <!-- all my code is here and works fine -->
    </div>
</template>

<script>
export default  {
  data() {
    return {}
  },
  props: ['results'],
  created(){...},
  methods: {...},
  components: {}
}
</script>

<style lang="sass">
.ResultBox__ViewMoreButton
    background: rgba(146, 146, 146, 0.16)
</style>

I've also tried using "scss" as well. I have this line towards the top of my gulpfile

require('laravel-elixir-vueify');

Any ideas?

0 likes
8 replies
BENderIsGr8te's avatar

Guess I should have posted that.

Browserify Failed!: Invalid CSS after "": expected 1 selector or at-rule, was "ultBox__ViewMor..." while parsing file: /.../assets/js/components/RentalResultBox.vue

If I add the brackets and semicolon it works fine. Also, I tried changing it to "stylus" for the language and the error changed to "stylus not installed", so I am guessing sass is installed correctly (not to mention I use it outside of this component in regular sass files).

davestewart's avatar

Looks like you're writing stylus not sass. You need to include braces!

BENderIsGr8te's avatar

I'll admit I'm new to SASS (and Stylus), however, from what I understand that would be correct syntax in both.

In fact, from the SASS "indent syntax" page I copied and pasted this into the style tag and removed mine and received a similar error

#main
  :color blue
  :font-size 0.3em

And I received the following error

Browserify Failed!: Invalid CSS after "...font-size 0.3em": expected "{", was "" while parsing file: .../components/RentalResultBox.vue
Dan's avatar

Syntax aside, I think vueify supports "scss" not "sass".

BENderIsGr8te's avatar

Thanks Dan, I actually tried both ways and still get the error. I've just gone to the more current sass syntax and it seems to be fine. I am thinking the old indent style syntax isn't supported.

evanb2's avatar

I just read a similar issue that was solved by installing the node-sass lib.

Please or to participate in this conversation.