脚本宝典收集整理的这篇文章主要介绍了vue 配置sass、scss全局变量，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

下载vue项目

下载vue项目就不多说了，大家既然搜索这个标题，肯定不差这一步

依赖：

1.下载sass-resources-loader

执行npm/cnpm install sass-resources-loader --save-dev

修改配置

打开build文件夹，找到下面的utils文件，找到exports.cssLoaders里的下面这段，将scss配置改成如下形式

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
}

把scss项替换成如下形式

scss: generateLoaders('sass').concat({
  loader:'sass-resources-loader',
  options:{
    resources:path.resolve(__dirname,'../src/assets/sass/common.scss')
  }
}),

这里我的common.scss放置了变量文件VARiable.scss和mixin.scss

// mixin.scss
@import './variable.scss';
@import './mixin.scss';

重新执行npm run dev 启动服务

在vue组件里写上一段试试吧，例如：

<style lang="scss">
#app {
    font-size: 14px;
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: $fontMainColor;
    height: 100%;
}
.triangle-top{
    display: inline-block;
    @include triangle(bottom, 10px, #ff0000)
}
.test{
    background: #ccc;
    @include box-shadow(0 0 5px rgba(0,0,0,.3));
}
</style>

脚本宝典总结

以上是脚本宝典为你收集整理的vue 配置sass、scss全局变量全部内容，希望文章能够帮你解决vue 配置sass、scss全局变量所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。