Using SCSS in Vue components

I’m looking for a way to tell laravel-mix to use the sass-loader when it comes across the following in a Vue component.

<style lang="scss">
   // random scss
</style>

The issue at hand is that there isn’t really an scss-loader. sass-loader is used for both scss and sass, however by default whenever vue-loader sees lang="scss" it tries to find scss-loader.

I could just use lang="sass", however this causes most text editors to highlight (would-be) sass errors.

When using laravel-elixir I’m able to get around this by adding the following snippet to my webpack.config.js file.

module.exports = {
  vue: {
    loaders: {
      js: 'buble-loader',
      scss: 'vue-style-loader!css-loader!sass-loader'
    }
  }
}

I’m currently using the mix.webpackConfig method to change other configuration, however I’m not sure what options I need to pass in to accomplish my goals.

[JeffreyWay]

Hey guys, I’ve updated the webpack.config.js to allow for specifying:

<style lang="sass">
    $primary: red

    #thing
        background: $primary
</style>

Or:

<style lang="scss">
    $primary: red;

    #thing {
        background: $primary;
    }
</style>

[trekze]

@ruchern Apologies for the necro. Is this a bad practice to do in every component? Is webpack smart enough to not reduplicate importing that css for everything? Uncertain of what’s going on when I go with this approach, but I haven’t found any other solution. I don’t like cluttering my vue templates with col-xs-12 and so forth, so I prefer to use mixins and keep my classes semantic.

6 months later, someone walks by and wonders the same thing a @laaksomavrick

Is it ok to import bootstrap scss in every styled component, or is that duplicating a whole bunch of css that ends up in the bundle?! Thank you!