美文网首页
vue_cli3手动安装scss

vue_cli3手动安装scss

作者: _hider | 来源:发表于2019-11-15 14:18 被阅读0次

安装和使用

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>

相关文章

网友评论

      本文标题:vue_cli3手动安装scss

      本文链接:https://www.haomeiwen.com/subject/sxvjictx.html