Modify sass-loader options in webpack.mix.js file

Have any option to modify the sass-loader options in the webpack.mix.js file? I want to import (override) sass variables into my .vue file <style> tags.

For example:

Example.vue:

<template> ... </template>
<script> export default { ... } </script>
<style lang="scss">
/* ---- I want to import ./styles/custom_variables file here ---- */
@import './styles/imports';

$ui-alert-color             : rgba(black, 0.75) !default;
$ui-alert-font-size         : rem-calc(15px) !default;
$ui-alert-margin-bottom     : rem-calc(16px) !default;
</style>

I can modify the webpack.config.js#L165 to:

options:
    Object.assign(
        toCompile.pluginOptions,
        { data: '@import "./styles/custom_variables";' }
    )

But i think it’s not a nice workaround.

Ps: It’s an awesome tool Jeff, keep it up! 😃

[JeffreyWay]

You can pass your plugin options as the third argument to mix.sass(). So I think you should be able to do:

mix.sass('src', 'output', {
    data: '@import "./styles/custom_variables";'
});

[JonasDoebertin]

That doesn’t work for me. The @import from the data option only gets applied to the main app.scss file im processing. Not to the *.vue components imported in the JS.