vue 设置sass、scss全局变量

2024年1月6日 352次阅读 来源: 活力林林

下载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>
    原文作者：活力林林
    原文地址: https://segmentfault.com/a/1190000018219877
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞