脚本宝典收集整理的这篇文章主要介绍了

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群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过