Vue 中实现全局引入 scss 变量_variables.scss

导读

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

目录结构

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

配置

// vue.config.js
module.exports = {
// ... other config
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "~@/assets/styles/variables.scss";`,
      },
    },
  },
  // ... other config
}
1
2
3
4
5
6
7
8
9
10
11
12

使用

// 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/菜鸟追梦旅行/article/detail/82294