vue 配置sass、scss全局变量

2024年3月22日 110次阅读 来源: 活力林林

下载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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞