vue_cli3手动安装scss

安装和使用

npm install sass-loader node-sass --save

这时候安装完就可以在组件中使用scss了。

<style scoped lang="scss">
.wrap {
    h1{
        color:blue;
    }
}
</style>

引入SCSS全局变量

_variable.scss

$color-theme:#498eff;

如果想要使用scss变量的话，需要对配置文件做如下修改

vue.config.js

css: {
    loaderOptions: {
        sass: {
            prependData: `@import "~@/assets/scss/_variable.scss";`
        }
    }
}

修改完配置文件记得重启下项目，接下来就可以使用scss变量，函数等功能了。

<style scoped lang="scss">
.wrap {
    h1{
        color:$color-theme;
    }
}
</style>