Vue 中使用 sass-resources-loader 实现全局引入 scss 变量

导读

最终实现的效果是：在 vue 文件的 style 标签中以及其它 scss 文件中都可以直接使用全局配置的 scss 变量，不需要再导入对应的 scss 文件。

目录结构

src
│  App.vue
│  main.js
│
├─assets
│  └─styles
│          index.scss
│          variables.scss
│          variables2.scss
1
2
3
4
5
6
7
8
9

安装插件

# sass-loader: 将 scss 文件编译为 css 文件
# sass-resources-loader: 全局加载 scss 文件
npm i -D sass sass-loader@10.2.1 sass-resources-loader
1
2
3

配置

// vue.config.js
module.exports = {
// ... other config
  chainWebpack: (config) => {
    const oneOfsMap = config.module.rule('scss').oneOfs.store
    oneOfsMap.forEach((item) => {
      item
        .use('sass-resources-loader')
        .loader('sass-resources-loader')
        .options({
          resources: './src/assets/styles/variables.scss',
        })
        .end()
    })
  },
  // ... other config
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

使用

// variables.scss 文件

//  主题色
$themeColor: #0dbc5c; // 一级主题色
$subThemeColor: #51ec97; // 二级主题色

// 字体
$fontColor: #d15656;

// 长度
$w200: 200px;
1
2
3
4
5
6
7
8
9
10
11

<template>
  <!-- App.vue -->
  <div id="app">
    <h2>配置全局 scss 变量</h2>
    <div class="box1">哈哈哈</div>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style lang="scss" scoped>
.box1 {
  // 
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/82372